![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
[CSS] アスペクト比を固定できるaspect-ratioプロパティの使い方
MARKLEAPS
レスポンシブと相性のよい、cssのaspect-ratioプロパティの使い方についてまとめました。
aspect-ratioプロパティとは
aspect-ratio プロパティは、アスペクト比を定義するプロパティです。
アスペクト比とは？
アスペクト比とは、幅：高さの比率のことです。
【代表的なアスペクト比】
| 4:3 | アナログ放送時代のテレビ |
|---|---|
| 3:2 | 一眼レフカメラ |
| 16：9 | デジタル放送テレビやYouTube等の動画 |
| 1:1 | 正方形。インスタグラムやバナー広告など |
| 1.414:1 | 白銀比。半分に切っても永久に縦横比率が変わらない、印刷物の用紙規格 |
| 1.618:1 | 黄金比。人が最も美しいと感じるバランスの比率 |
aspect-ratioの使い方
width と height の比率をスラッシュ / で区切って指定します。
|
1 2 3 |
.box { aspect-ratio: 16 / 9; } |
任意のアスペクト比で画像をトリミング
html
|
1 |
<div class="aspect_16_9"><img src="images/img01.jpg"></div> |
css
|
1 2 3 4 5 6 7 8 |
.aspect_16_9 { width: 300px; } .aspect_16_9 img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; } |
aspect-ratio と object-fit: cover; を使えば、任意のアスペクト比で画像をトリミングできます。
従来のpadding-topを使ってアスペクト比を保持する方法
これまで、任意のアスペクト比で画像をトリミングする場合、
高さ ÷ 幅 × 100 でアスペクト比を求め（16:9の場合は9/16*100=56.25%）、
padding-topでアスペクトを保持する方法が主流でした。
【従来の方法】
html
|
1 |
<div class="padding_16_9"><img src="images/img01.jpg"></div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.padding_16_9 { width: 300px; overflow: hidden; position: relative; } .padding_16_9::before { content: ""; display: block; padding-top: 56.25%; } .padding_16_9 img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: auto; } |
aspect-ratioの登場で、より直感的に、簡潔に、コーディングしやすくなりました。
↓
|
1 2 3 4 5 6 7 8 |
.aspect_16_9 { width: 300px; } .aspect_16_9 img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; } |
![[WordPress] プラグイン「Custom Field Template」の使い方【後編】](https://markleaps.com/blog/wp-content/uploads/2021/03/wp_cft02-500x254.gif)
![[WordPress] よく使うテンプレートタグまとめ](https://markleaps.com/blog/wp-content/uploads/2020/05/wp_tmp01-500x254.gif)