CSSプロパティのaspect-ratioを使ってみる

要素のアスペクト比を設定できるaspect-ratioを使ってみます。

対応ブラウザ

aspect-ratioの対応ブラウザはこちら
IE以外は概ね対応しているようです。

サンプルコード

aspect-ratioの値は「width / height」の形で比率を指定します。

<div class="sample"></div>

.sample {
	width: 50%;
	aspect-ratio: 16 / 9;
	background: skyblue;
}

これで.sampleの要素が16:9で表示されるようになりました。
aspect-ratioのデモページ

iframeやvideoに対して設定することもできます。

<iframe src="https://www.youtube.com/embed/Z-UJbyLqioM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<video controls muted src="video.mp4"></video>

iframe, video {
	width: 50%;
	aspect-ratio: 16 / 9;
}

iframe,とvideoにaspect-ratioを指定するデモページ2