acsept-ratioを使ってみる

以前にCSSで指定した縦横比を維持するという記事を投稿しましたが、別の方法として、要素のアスペクト比を設定できるCSSプロパティの「acsept-ratio」を試してみます。

対応ブラウザ

対応ブラウザはこちら
IEで非対応になっていますが、主要なブラウザではサポートされているようです。

サンプルコード

例としてdiv要素に対して設定してみます。

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

aspect-ratioの値は「【width】 / 【height】」の形でアスペクト比を指定します。

.sample {
	width: 50%;
	aspect-ratio: 4 / 3;
	background: red;
}

この場合、アスペクト比4:3の設定になります。
aspect-ratioのデモページ

aspect-ratioはiframeなどにも使用できます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/AniQdstq4KM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
iframe {
	width: 50%;
	min-width: ;
	aspect-ratio: 16 / 9;
}

iframeでのデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年8月
 123456
78910111213
14151617181920
21222324252627
28293031