aspect-ratio:要素の推奨アスペクト比を指定する

SNSでシェアする

初期値 auto
適用対象 インラインレベルおよびルビやテーブルが生成するボックス以外の要素
継承 しない
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

aspect-ratioプロパティの説明

CSSのaspect-ratioプロパティは、要素が生成するボックスの推奨アスペクト比を指定します。要素は幅(width)と高さ(height)を持つ二次元の平面で表現されますが、この二つを関連付けて比率を決めることができます。

多くの場合、アスペクト比は画像や動画に対して使われる言葉です。コンテンツの横の寸法と縦の寸法の比率を表します。例えば、ハイビジョンであれば16:9、写真であれば4:3という具合に表記します。

CSSでは、要素が生成したボックスの寸法に対してアスペクト比を指定できます。コンテンツのレイアウトが決まっている箇所などで、内容に関わらず幅と高さの寸法の比率を維持したい場合に役立ちます。

aspect-ratioに指定できる値

auto
内在的なアスペクト比を持つ置換要素であれば、その値を使用し、それ以外の場合はアスペクト比を指定しません。
<ratio>
要素の推奨アスペクト比を[width / height]で表します。heightの値を省略した場合は既定値で1となります。アスペクト比の計算は、box-sizingで指定されたボックスの寸法で行われます。

aspect-ratioの使い方とサンプルコード

aspect-ratioプロパティの構文は以下の通りです。


/* アスペクト比の指定 */
aspect-ratio: 1;
aspect-ratio: 4 / 3;
aspect-ratio: 16 / 9;

/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;

aspect-ratioの実例

それでは実際にaspect-ratioを使った例を見てみましょう。以下の内容は、幅と高さを固定した親要素の中に、寸法を定めていない子要素を配置しています。子要素のアスペクト比を指定していない段階では、ボックスの高さは内容に依存しています。

子要素にaspect-ratioを指定すると、横幅に対する高さの寸法が変わります。これは、widthheightを敢えて指定していないからで、heightの値を明示すれば、高さを基準とした幅の比率を計算します。

以下の選択項目のaspect-ratio: 0.5;を選んだ場合、幅を基準にした計算では高さが親要素の寸法を超過してはみ出しますが、この選択肢のスタイルにheight: 100%;を追加しているため、幅の寸法が縮むようになっています。


<div class="sample-control">
	<select id="js_select">
		<option value="" label="選択してください" selected />
		<option value="ar-auto" label="aspect-ratio: auto;" />
		<option value="ar-1x1" label="aspect-ratio: 1/1;" />
		<option value="ar-4x3" label="aspect-ratio: 4/3;" />
		<option value="ar-16x9" label="aspect-ratio: 16/9;" />
		<option value="ar-05" label="aspect-ratio: 0.5;" />
		<option value="ar-15" label="aspect-ratio: 1.5;" />
	</select>
</div>
<div class="sample-block" data-mode="0">
	<div class="item" id="js_target">
		Text contents.<br>
		Text contents.<br>
		Text contents.<br>
	</div>
</div>
<script>
	const selectToggle = document.getElementById('js_select');
	const target = document.getElementById('js_target');
	if (selectToggle) {
		selectToggle.addEventListener('change', () => {
			const toggleVal = selectToggle.value;
			target.className = toggleVal;
		});
	}
</script>

/* 共通のスタイル */
.sample-block {
	max-width: 300px;
	height: 300px;
	margin-block-start: 1rem;
	padding: 3px;
	border: 3px solid gray;
}
.sample-block > div {
	margin: auto;
	background: url(/images/sample_photo_628x370.png) no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
}
/* アスペクト比の指定 */
.sample-block .ar-auto {
	aspect-ratio: auto;
}
.sample-block .ar-1x1 {
	aspect-ratio: 1/1;
}
.sample-block .ar-4x3 {
	aspect-ratio: 4/3;
}
.sample-block .ar-16x9 {
	aspect-ratio: 16/9;
}
.sample-block .ar-05 {
	aspect-ratio: 0.5;
	height: 100%;
}
.sample-block .ar-15 {
	aspect-ratio: 1.5;
}

aspect-ratioに関連するCSSプロパティ

要素の幅や高さ
aspect-ratio 要素の推奨アスペクト比を指定する
block-size 要素のブロック方向の寸法を指定する
box-sizing 要素の幅と高さをどのように計算するかを指定する
height 要素の物理的な高さの寸法を指定する
inline-size 要素のインライン方向の寸法を指定する
max-height 要素の高さの最大値を指定する
max-width 要素の幅の最大値を指定する
min-height 要素の高さの最小値を指定する
min-width 要素の幅の最小値を指定する
resize ユーザーが要素のサイズを変更できるかどうかを指定する
width 要素の物理的な幅の寸法を指定する