[HTML/CSS]レスポンシブを保って空のdivを正方形にしたい

未分類

結論

CSSの「aspect-ratio」を1にすれば良い。

例

例えば、横幅が親要素に対して60%の正方形を作りたい場合は、以下のようにする。

HTML：

<!-- 正方形にしたい空のdiv -->
<div class="square"></div>

CSS

.square {
    width: 60%;
    aspect-ratio: 1;
}

画面の横幅を変えても、正方形を維持してくれる。

コメント

タイトルとURLをコピーしました