"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.
Overview
CSS en boy oranı özelliği, kapsayıcı boyutundan bağımsız olarak öğe oranlarını korur. Duyarlı görseller, videolar ve kartlar için gereklidir. Dolgu-hack tekniğinin modern alternatifi.
💡
Pro Tips
Provide a default aspect ratio for <img> elements to prevent 'Cumulative Layout Shift' during page load.
The padding-top/bottom trick works by basing the padding percentage on the parent's width.
You can now use `aspect-ratio` on almost all elements including divs, iframes, and videos.
If you provide both width and height PLUS an aspect-ratio, the width/height usually takes precedence in browsers.
!
Fun Facts
Formula: en boy oranı: genişlik / yükseklik; veya en-boy oranı: 16/9;
