snippet html css

画像やボックスなどのアスペクト比を保ったまま可変にする

本ページにはプロモーションが含まれる場合があります

画像やボックスなどのアスペクト比を保ったまま可変にする

レスポンシブだと比率を保ったまま、サイズを可変にしたい場合があります。
以前だとpadding-topとbefore等の疑似要素を使って指定していましたが、最近だとaspect-ratioがお手軽で主流になっています。

ほとんどのモダンブラウザで対応していますが、SafariはiOS15から対応しています。
iOS14のシェア率がかなり少数ながらも残っているので要件に入っている場合は注意が必要です。

DEMO

square
16 : 9

HTML

<div class="aspect-ratio square">
  <span>square</span>
</div>
<div class="aspect-ratio wide">
  <span>16 : 9</span>
</div>

CSS

.aspect-ratio {
  width: 50%;
}
.aspect-ratio.square {
  background-color: #f8cfd5;
  aspect-ratio: 1 / 1;
}
.aspect-ratio.wide {
  background-color: #c1d6f5;
  aspect-ratio: 16 / 9;
}

aspect-ratioで比率を指定します。
一行で済むので、paddingを使った方法よりかなり楽です。

-snippet, html, css