CSS ・ レスポンシブ
aspect-ratio
縦横比
要素の縦横比（アスペクト比）を指定します。幅に合わせて、高さが自動で決まります。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box r16-9">16 / 9</div>
3 <div class="box r1-1">1 / 1</div>
4 <div class="box r3-4">3 / 4</div>
5</div>
CSS
1.row {
2 display: flex;
3 gap: 12px;
4 align-items: flex-start;
5}
6.box {
7 width: 120px;
8 display: grid;
9 place-items: center;
10 background: #e1ad66;
11 color: #5a3b0a;
12 font-size: 13px;
13}
14.r16-9 {
15 aspect-ratio: 16 / 9;
16}
17.r1-1 {
18 aspect-ratio: 1;
19}
20.r3-4 {
21 aspect-ratio: 3 / 4;
22}
02
実行結果
ブラウザでの表示
03
解説
aspect-ratio は「幅 / 高さ」の比率を指定するプロパティです。幅だけ決めれば、高さは比率に合わせて自動で計算されます。
動画の埋め込みやサムネイル画像など、画面幅に合わせて伸縮させつつ形を保ちたい要素に便利です。
画像に指定するときは、object-fit: cover を組み合わせると、比率が違う画像でも歪まずに切り抜かれます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
16 / 9 | 横長（動画など） |
1 / 1 または 1 | 正方形 |
3 / 4 | 縦長 |
auto | 内容や画像本来の比率（初期値） |
サムネイルを同じ形にそろえる
元の画像の比率がばらばらでも、同じ形に切り抜いて並べられます。
CSS
1.thumb img {
2 width: 100%;
3 aspect-ratio: 4 / 3;
4 object-fit: cover;
5}
注意点
- 01height を同時に指定すると、aspect-ratio より height が優先されます。
- 02中身が多くて収まらない場合は、比率よりも高くなることがあります。