1. ホーム
  2. CSS

【CSS】aspect-ratioプロパティについての解説と注意点

Share

aspect-ratioは、CSSで要素の縦横比（アスペクト比）を指定できる便利なプロパティです。画像や動画の比率を固定したり、レスポンシブなレイアウト設計にも役立ちます。

この記事では、aspect-ratioの基本的な使い方から、実際の使用例、注意点までを詳しく解説します。

aspect-ratioとは？

aspect-ratioは、要素の横幅に対して高さの比率を指定するためのCSSプロパティです。
形式は次の通りです：

aspect-ratio: 横 / 縦;

例えば、aspect-ratio: 16 / 9;とすれば、横長のワイド画面比率になります。

よく使われる比率の例

比率説明
1 / 1正方形
4 / 3一般的な写真やスクリーン
16 / 9YouTubeなどの動画サイズ
3 / 4縦長（スマホ画面向き）

基本的な使い方

HTMLコード例

<div class="aspect-box"></div>

CSSコード例

.aspect-box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background-color: #2196f3;
}

この例では、幅300px、高さは自動的に計算されて約168.75px（=300×9/16）になります。

画像や動画に使う場合

画像や動画にaspect-ratioを設定することで、読み込み前でも比率を維持したままスペースを確保できます。

これはCumulative Layout Shift（CLS）対策にも有効です。

<img src="https://picsum.photos/seed/picsum/536/354" class="image-ratio" alt="サンプル画像">

.image-ratio {
  aspect-ratio: 16 / 9;
  width: 400px;
  object-fit: cover;
}
Preview

HTMLコード例

<img src="https://picsum.photos/seed/picsum/200/300" class="image-ratio" alt="サンプル画像">

CSSコード例

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

widthとheightが両方指定されている場合、どちらが優先される？

widthとheightが両方指定されている場合、aspect-ratioを指定するとどうなるでしょう。

<img src="https://picsum.photos/seed/picsum/536/354" class="image-ratio" alt="サンプル画像">

.image-ratio {
  width: 300px;
  height: 300px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
Preview

高さと幅を400pxに指定したので、画像は正方形になっています。

このように、widthとheightを両方指定すると、aspect-ratioは効きません。

<img src="https://picsum.photos/seed/picsum/536/354" width="300" height="300" class="image-ratio" alt="サンプル画像">

.image-ratio {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
Preview

CSSでwidthとheightを指定せず、HTMLのwidth属性・height属性を300にしてみると、aspect-ratioは無視され正方形になります。

以下のように、height: autoをすることで、aspect-ratioが効くようになります。

<img src="https://picsum.photos/seed/picsum/536/354" width="300" height="300" class="image-ratio" alt="サンプル画像">

.image-ratio {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}
Preview

これで画像は16:9の比率になりました。

画像にはobject-fitのcontainerやcontainを指定する

元画像とaspect-ratioの縦横比が異なる場合、画像は縦または横に引き伸ばされてしまいます。

object-fitのcontainerやcontainを指定することで、画像を引き伸ばされないで表示させることができます。

<img src="https://picsum.photos/seed/picsum/536/354" class="image-ratio" alt="サンプル画像">

.image-ratio {
  width: 300px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
Preview

元画像は正方形ではありませんが、object-fit: cover;を指定することで画像が歪むことなく切り抜かれて表示されます。

object-fit: contain;を指定すると、以下のようになります。

分かりやすいように、背景にグレーの色をつけています。

<img src="https://picsum.photos/seed/picsum/536/354" class="image-ratio" alt="サンプル画像">

.image-ratio {
  width: 300px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #ddd;
}
Preview

containを指定すると、300×300pxのボックスの中に画像が全て収まるサイズで表示されます。

注意点

1. aspect-ratioは上書きされることがある

要素にheightとwidthの両方を明示的に指定すると、aspect-ratioは無視される場合があります。どちらか片方を指定する、または明示的にautoを使って調整する必要があります。

2. コンテナサイズに依存する

レスポンシブ対応の場合は、親要素のサイズに影響されるため、width: 100%やmax-widthと組み合わせて使うと柔軟性が増します。

3. 画像にはobject-fitのcontainerやcontainを指定する

元画像とaspect-ratioの縦横比が異なる場合、画像は縦または横に引き伸ばされてしまいます。

object-fitのcontainerやcontainを指定することで、画像を引き伸ばされないで表示させることができます。

まとめ

aspect-ratioは、CSSだけで簡単に縦横比をコントロールできる強力なプロパティです。特に画像・動画・カードUIなどのレイアウトにおいて、サイズ崩れを防ぎながら美しい比率を保てるため、現代のWebデザインには欠かせません。

対応ブラウザや上書きの挙動には注意しつつ、aspect-ratioを活用して、より整ったレイアウトを目指しましょう。

参考記事

aspect-ratio – CSS: カスケーディングスタイルシート | MDN

CSSで画像をレスポンシブ対応させる方法 – Webool