【CSS】簡単！アスペクト比保持【備忘録】

こんにちは、ワタナベです。

今回はアスペクト比を設定するプロパティ「aspect-ratio」のご紹介。
最近とてもお世話になっております( ;∀;)

「aspect-ratio」はアスペクト比を保持し、さらにレスポンシブにも対応しています。
比率を保ったまま要素をレスポンシブさせます。

SAMPLE

SAMPLE、上から1:1、4:3、16:9です。
imgに「object-fit: cover;」を指定し「aspect-ratio」で比率を指定することで、指定の比率で画像をトリミングしています。

今まで「height : 〇vw」やら「padding-top: 〇%」で対応してきましたが、この一行の記述のみで済むのが本当にありがたいです。
こちらは画像だけでなく、YoutubeやGooglemapの埋め込み等にも使うことができます。

便利なのでぜひ使ってみてください(‘ω’)ノ

▼THANKS！

それではまた次回。

ご閲覧ありがとうございました♪