Spanduk, thumbnail, dan slot pahlawan semuanya memiliki satu mode kegagalan: media datang terlambat, kotak runtuh, dan halaman di bawahnya bergeser. rasio aspek mengubah kotak itu menjadi janji yang ditepati oleh mesin itu sendiri, yang merupakan kontrak yang sangat gacor untuk satu deklarasi.
/* both of these hold their shape before and after load */
.banner { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1; width: 5rem; }Mengapa ini mengalahkan peretasan padding
/* the old trick: correct math, unreadable by humans */
.media { padding-top: 56.25%; }- rasio aspek berfungsi pada elemen apa pun, tidak hanya gambar dan video, sehingga kartu, strip spanduk, dan ubin ikon semuanya mendapatkan satu deklarasi, bukan trik padding persentase yang dibuat pada konten yang tidak terlihat.
- Ukuran eksplisit menang: atur lebar dan tinggi dan browser akan menghormatinya; biarkan sumbu silang otomatis dan rasionya menjaga kotak tetap stabil.
- Elemen yang diganti seperti img dan video mempertahankan rasio intrinsiknya sebagai default cadangan, sehingga foto potret tidak pernah melebar hingga memenuhi slot lanskap.
Rasio di dalam flex dan grid
Kontrak tersebut bertahan berdasarkan ukuran yang lain: kartu yang lebarnya berasal dari jalur kisi masih menghitung tingginya dari rasio. Ketika suatu tata letak mengejutkan Anda di sana, ukurlah terlebih dahulu dengan pemeriksa kotak, karena penyebab umum adalah penyelarasan regangan yang menetapkan sumbu silang secara eksplisit.
Satu peringatan yang perlu diperhatikan: ukuran konten minimum dapat mengesampingkan rasio dalam baris fleksibel yang ketat, jadi berikan kotak tersebut basis fleksibel yang eksplisit. Tambahkan sekali dan properti tetap stabil di mana pun Anda menggunakannya.