【CSS】アスペクト比の設定をaspect-ratioにアップデート

画像や動画のアスペクト比（縦横比）を設定するaspect-ratioプロパティが、主要ブラウザでサポートされるようになったため、気兼ねなく使用できるようになりました。

1.画像対応

数か月前に書いたこちらの記事
【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法

画像の縦横比を保つため、画像の親要素にpadding-topを指定していました。（画像の比率を16:9にしたので、9 / 16 × 100=56.25%）

.blogList li figure {
  overflow: hidden;
  padding-top: 56.25%; /* 画像の高さを幅の56.25%に固定する */
}

aspect-ratioプロパティを使用すると、計算をする必要は無く、値に画像の比率16:9を16 / 9と入れるだけなので、わかりやすくスマートになります。

.blogList li figure {
  overflow: hidden;
  aspect-ratio: 16 / 9; /*画像のアスペクト比を16:9に設定*/
}

2.YouTube埋め込みのレスポンシブ対応

YouTubeの埋め込みのレスポンシブ対応でも、padding-top指定の方法からaspect-ratioプロパティへのアップデートで、positionの指定が不要になり、わかりやすく、シンプルになります。

HTML

<div class="youtube">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/PUIO7vhpXwI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9; /*YouTubeのアスペクト比を16:9に設定*/
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

3.対応ブラウザ

主要ブラウザでサポートされています。（2021年12月7日現在）

▼aspect-ratioのサポート状況 | Can I use
https://caniuse.com/mdn-css_properties_aspect-ratio