CSSの「aspect-ratio」で画像のアスペクト比を指定する

CSSの「aspect-ratio」を使用すると、レスポンシブ対応の画像のアスペクト比を維持することができます。サイズが統一されてない複数の画像を表示するときも、一括して指定ができる便利なプロパティです。
それでは見ていきましょう。

サンプルをご覧ください

上記のサンプルをご覧ください。
読み込まれている3つの画像サイズは統一されていませんが「aspect-ratio」でアスペクト比を統一しています。

HTMLの記述内容

<ul>
  <li>
    <img src="https://unsplash.it/1600/900" alt="">
    <span>「 16 : 9 」のアスペクト比の画像が読み込まれています。</span>
  </li>
  <li>
    <img src="https://unsplash.it/1200/800" alt="">
    <span>「 3 : 2 」のアスペクト比の画像が読み込まれています。</span>
  </li>
  <li>
    <img src="https://unsplash.it/1200/1200" alt="">
    <span>「 1 : 1 」のアスペクト比の画像が読み込まれています。</span>
  </li>
</ul>

検証しやすいように3種類のアスペクト比の画像を読み込んでいます。

CSSの記述内容

img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

imgタグに「aspect-ratio: 16 / 9」と指定すると「 16 : 9 」のアスペクト比で表示してくれます。
「 3 : 2 」にしたい場合は「aspect-ratio: 3 / 2」、「 1 : 1 」にしたい場合は「aspect-ratio: 1」と指定しましょう。

「object-fit: cover」は画像が引き伸ばされないように指定しています。

地図や動画のアスペクト比を指定する場合

地図や動画はiframeタグで読み込みます。
先に紹介した画像と同じ容量でアスペクト比を指定することができます。

HTMLの記述内容

<ul>
  <li>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212562.02415783118!2d130.09916448090505!3d33.649863916585836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541eda1e9848429%3A0xf60a729936398783!2z56aP5bKh55yM56aP5bKh5biC!5e0!3m2!1sja!2sjp!4v1680168840653!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </li>
  <li>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/IqKz0SfHaqI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </li>
</ul>

Googleマップ、YouTubeから埋め込みコードを生成して読み込んでいます。

CSSの記述内容

iframe{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

画像と同じ容量で「aspect-ratio: 16 / 9」を指定することで「 16 : 9 」のアスペクト比で表示してくれます。

まとめ

CSSの「aspect-ratio」で画像のアスペクト比を指定する方法について紹介しました。
コードの記述量も少なく簡単に実装することができましたね。
よかったら参考にしてみてください。