CSS

Cascading Style Sheets aspect-ratio property.

aspect-ratio

　aspect-ratioプロパティは、名前の通り、アスペクト比を定義できます。

Item 1
Item 2
Item 3
Item 4

HTML source


<div class="container">
	<div class="item1">Item 1</div>
	<div class="item2">Item 2</div>
	<div class="item3">Item 3</div>
	<div class="item4">Item 4</div>
</div>

CSS source


div.container {
	background-color: silver;
	padding: 5px;
	display: inline-flex;
	flex-wrap: wrap;
}

div.item1, .item2, .item3, .item4 {
	background-color: gray;
	margin: 5px;
	padding: 5px;
	height: 100px;
}

div.item1 {
	aspect-ratio: 3 / 2;
}

div.item2 {
	aspect-ratio: 2 / 3;
}

div.item3 {
	aspect-ratio: 4 / 3;
}

div.item4 {
	aspect-ratio: 16 / 9;
}

アスペクト比とは

　アスペクト比は一般的に、幅：高さ、x:y のように異なる次元を２つの整数とコロンで表されます。写真画像でよく使用されるアスペクト比は 4:3 や 3:2 で、動画では 16:9 がよく使用されます。

Browser support tables

　ブラウザの対応状況です。

Data on support for the mdn-css__properties__aspect-ratio feature across the major browsers from caniuse.com