[CSS] アスペクト比を固定できるaspect-ratioプロパティの使い方

MARKLEAPS

2023.07.19

レスポンシブと相性のよい、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 の比率をスラッシュ / で区切って指定します。

.box {
	aspect-ratio: 16 / 9;
}

.box {

aspect-ratio: 16 / 9;

}

任意のアスペクト比で画像をトリミング

html

<div class="aspect_16_9"><img src="images/img01.jpg"></div>

1	<div class="aspect_16_9"><img src="images/img01.jpg"></div>

css

.aspect_16_9 {
	width: 300px;
}
.aspect_16_9 img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.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

<div class="padding_16_9"><img src="images/img01.jpg"></div>

1	<div class="padding_16_9"><img src="images/img01.jpg"></div>

css

.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;
}

.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の登場で、より直感的に、簡潔に、コーディングしやすくなりました。

↓

.aspect_16_9 {
	width: 300px;
}
.aspect_16_9 img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.aspect_16_9 {

width: 300px;

}

.aspect_16_9 img {

width: 100%;

object-fit: cover;

aspect-ratio: 16 / 9;

}

CSS

よく読まれている関連記事

「Instagram Graph API」を使ってインスタグラムの投稿をサイトに表示する方法