New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly | Articles | web.dev

Aspect ratio Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio. Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio. With the ad

[wdscratch]

“要約: アスペクト比と呼ばれる一貫した幅と高さの比率を維持することは、レスポンシブ Web デザインや、累積的なレイアウトシフトを防ぐために重要です。”

[efcl]

aspect-ratioを使ったwidth/heightの比率の実装について。 width 100%に対して高さを決めたい場合

[hc0001]

aspect-ratio プロパティのメリットは色々あるけど、CLS を減らせるのが嬉しい。縦横比を指定したい <iframe> 要素の実装も、親要素の padding-top と組み合わせるハック実装をする必要がなくなる。

[sh19e]

“Another great feature of aspect-ratio is that it can create placeholder space to prevent Cumulative Layout Shift and deliver better Web Vitals”