cssで画像の縦横比（アスペクト比）を保持して表示する方法

CSSを使って画像のアスペクト比を保持する2つの方法について解説します。

初めての目次

◼︎ 方法1: aspect-ratioプロパティを使用する
◼︎ 方法2: object-fitプロパティを使用する
まとめ

◼︎ 方法1: aspect-ratioプロパティを使用する

まずは、CSSの新しいプロパティ「aspect-ratio」を使った方法です。このプロパティを使うことで、要素の縦横比を簡単に設定できます。

<div class="aspect-ratio-container">
  <img src="sample.webp" alt="サンプル画像">
</div>

<style>
.aspect-ratio-container {
  aspect-ratio: 16 / 9; /* 縦横比を16:9に設定 */
  width: 100%; /* 幅は100% */
  overflow: hidden; /* はみ出た部分を隠す */
}

.aspect-ratio-container img {
  width: 100%; /* 幅を100%に設定 */
  height: auto; /* 高さは自動で調整 */
}
</style>

「aspect-ratio」を使った画像表示

このコードを実行すると、画像は16:9のアスペクト比を保持しながら表示されます。

◼︎ 方法2: object-fitプロパティを使用する

次に、CSSの「object-fit」プロパティを使った方法です。このプロパティは、画像や動画がコンテナ内でどのように表示されるかを制御します。

<div class="object-fit-container">
  <img src="sample.webp" alt="サンプル画像">
</div>

<style>
.object-fit-container {
  width: 100%; /* コンテナの幅 */
  height: 300px; /* コンテナの高さ */
  overflow: hidden; /* はみ出た部分を隠す */
}

.object-fit-container img {
  width: 100%; /* 幅を100%に設定 */
  height: auto; /* 高さは自動で調整 */
  object-fit: cover; /* 縦横比を保持しつつ、コンテナを埋める */
}
</style>