結論
CSSの「aspect-ratio」を1にすれば良い。
例
例えば、横幅が親要素に対して60%の正方形を作りたい場合は、以下のようにする。
HTML:
<!-- 正方形にしたい空のdiv -->
<div class="square"></div>
CSS
.square {
width: 60%;
aspect-ratio: 1;
}
画面の横幅を変えても、正方形を維持してくれる。
CSSの「aspect-ratio」を1にすれば良い。
例えば、横幅が親要素に対して60%の正方形を作りたい場合は、以下のようにする。
HTML:
<!-- 正方形にしたい空のdiv -->
<div class="square"></div>
CSS
.square {
width: 60%;
aspect-ratio: 1;
}
画面の横幅を変えても、正方形を維持してくれる。
コメント