CSSで縦横比を指定したい

WEB制作
CSSで縦横比を指定したい

おはようございます。小野です。
CSSを書いていて、個人的に一番多いタイポは「margin: atuo」です。
私のコードではよくマージンが熱男します。

…


今回はCSSで指定する方法を紹介します。

主に画像など、要素の縦横比を指定したい場合ってけっこう多いです。

目次

CSSプロパティ「aspect-ratio」

名前の通り、「アスペクト比」を指定できるプロパティです。

記述例（4:3の場合）
aspect-ratio: 4 / 3

See the Pen aspect-ratio by Hirofumi Ono (@onow) on CodePen.

aspect-ratioはシンプルで使いやすいですが、
最新ブラウザ以外だと対応していない場合が多いです。(2021/11)

【参考】対応状況

https://caniuse.com/?search=aspect-ratio

CSSプロパティ「padding-top」を使う

結局Safariなどは最新バージョンでないと対応していないので、
まだこちらを使っているのが現状です。

画像を4:3で切り取るときはこんな感じ↓

  <div>
    <img src="画像">
  </div>
div {
    position: relative;
    width: 100%;
    padding-top: 75%;
}

img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

↓

正方形

padding-topで％を指定すると要素の横を参照するので、widthを指定する際は注意です。

まとめ

padding-topを利用する方法は無理矢理感がすごいので、
aspect-ratioを使いたいものです。

主要の最新ブラウザには対応しているので、これからに期待ですね。