Rasio Aspek Wadah Media CSS

Kunci rasio bingkai gambar dan embed video iframe agar tata letak web stabil sempurna.

Dasar: Kalkulasi rasio: persentase padding hack = (tinggi / lebar) x 100%. Properti modern aspect-ratio = W / H. Sumber: Pedoman stabilitas visual Core Web Vitals Google.
Status: Belum dicocokkan dengan sumber resmi. Perlakukan angka dan aturan di halaman ini sebagai estimasi.

Dimensi lebar video / gambar asli

Dimensi tinggi video / gambar asli

Mengatasi Cumulative Layout Shift (CLS)

Saat video embed dimuat secara asinkron, ketiadaan rasio dimensi membuat konten di bawahnya melonjak ke bawah secara tiba-tiba. Menentukan aspect-ratio menjaga wadah tetap stabil sejak awal halaman dibuka.

Pertanyaan yang sering diajukan

Bagaimana cara menerapkan aspect-ratio pada iframe YouTube?

Bungkus iframe dalam div pembungkus yang diberi properti aspect-ratio: 16 / 9; lalu atur width: 100%; height: 100%; pada elemen iframe di dalamnya.