環境
Windows10
Chrome93
Chromeでは88から、Firefoxでは89から、Safariは未対応のようです。
追記:Safari15からaspect-ratioに対応するようです。リリースが待ち遠しいです。
aspect-ratio
今回は16:9にします
<div class="container"></div>
.container {
aspect-ratio: 16 / 9
}
これだけです。とても簡単。
未対応ブラウザ
<div class="container"></div>
.container {
position: relative
}
#container::before {
content:"";
display: block;
padding-bottom: 56.25%; /* height(9) / width(16) * 100 */
}
少し使い勝手が悪いです。
↧