"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.
Overview
Properti rasio aspek CSS mempertahankan proporsi elemen terlepas dari ukuran wadah. Penting untuk gambar, video, dan kartu responsif. Pengganti modern untuk teknik padding-hack.
💡
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: rasio aspek: lebar / tinggi; atau rasio aspek: 16/9;
