aspect-ratioプロパティってなに？
aspect-ratioはCSSのプロパティでアスペクト比を設定できます。
具体的にどういうときに使うの？と思う方もいるかも知れませんが、一番は動画をページに埋め込む際の高さの指定とレスポンシブの対応がaspect-ratioを使うとかなり楽です。
aspect-ratioの使い方
aspect-ratio: 幅の比率 / 高さの比率;iframeタグに使用する場合
<div class="box"></div>.box {
aspect-ratio: 16 / 9;
width: 100%;
}サポートブラウザ
対応しているブラウザ
Chrome
Edge
Safari
Firefox
Opera
Chrome for Android
Safari on iOS
Samsung Internet
Opera Mobile
Android Browser
Firefox for Android
未対応のブラウザ
IE
Opera Mini
UC Browser for Android
QQ Browser
Baidu Browser
KaiOS Browser
※最新情報はこちらを確認してください。
"aspect-ratio" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com
