aspect-ratioは、CSSで要素の縦横比（アスペクト比）を指定できる便利なプロパティです。画像や動画の比率を固定したり、レスポンシブなレイアウト設計にも役立ちます。
この記事では、aspect-ratioの基本的な使い方から、実際の使用例、注意点までを詳しく解説します。
目次
aspect-ratioとは？
aspect-ratioは、要素の横幅に対して高さの比率を指定するためのCSSプロパティです。
形式は次の通りです：
aspect-ratio: 横 / 縦;
例えば、aspect-ratio: 16 / 9;とすれば、横長のワイド画面比率になります。
よく使われる比率の例
| 比率 | 説明 |
|---|---|
1 / 1 | 正方形 |
4 / 3 | 一般的な写真やスクリーン |
16 / 9 | YouTubeなどの動画サイズ |
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;
}
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;
}
高さと幅を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;
}
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;
}
これで画像は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;
}
元画像は正方形ではありませんが、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;
}
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を活用して、より整ったレイアウトを目指しましょう。