![見出し画像](https://assets.st-note.com/production/uploads/images/67215934/rectangle_large_type_2_d0df1838f936765f5513b4ddfec487c4.jpg?width=1200)
【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
この記事が気に入ったらサポートをしてみませんか?