Width, Height, dan Intrinsic Ratio

Di section Values, Units, dan Sizing kita sudah memakai resep max-width: 100% + height: auto untuk meredam gambar yang meluber, dan saat itu janji pembahasannya ditunda ke section ini. Kuncinya ada pada sifat bawaan gambar: setiap berkas membawa ukuran aslinya sendiri (intrinsic size) beserta perbandingan lebar dan tingginya (intrinsic ratio). Chapter ini membedah dua istilah tersebut, menjelaskan mekanisme di balik resep itu baris demi baris, dan menambahkan satu kebiasaan HTML yang mencegah layout melompat saat gambar selesai dimuat.

Ukuran Intrinsik Gambar #

Sebagai replaced element, gambar membawa dimensi bawaan dari berkasnya sendiri. Gambar SVG berukuran 320x200, misalnya, punya intrinsic size 320 piksel kali 200 piksel dan intrinsic ratio 320:200 — sederhananya 8:5. Tanpa satu aturan CSS pun, browser merender gambar pada ukuran intrinsik itu:

.foto-alam {
  width: auto;  /* default browser: ikut ukuran intrinsik */
  height: auto;
}

Inilah sumber gambar yang merusak layout ponsel.

Intrinsic ratio bersifat invarian terhadap skala: gambar 8:5 yang diperkecil jadi 160px tetap berukuran 160x100. Browser selalu bisa menghitung tinggi dari lebar (atau sebaliknya) selama rasio ini diketahui — dan fakta inilah yang menopang seluruh trik pada chapter ini.

Membedah Resep max-width: 100% dan height: auto #

Sekarang resep yang dulu kita pakai tanpa tanya-tanya bisa dijelaskan tuntas:

img {
  max-width: 100%;
  height: auto;
}

Demo berikut menempatkan dua gambar identik di wadah selebar 240px. Pengaman max-width: 100% yang biasanya aktif di halaman sengaja dilonggarkan pada gambar pertama agar perilaku bawaan browser terlihat:

Bedah per deklarasi:

1. max-width: 100%: menetapkan batas atas lebar sebesar lebar konten induk. Lebar efektif gambar menjadi nilai terkecil antara ukuran intrinsik dan lebar wadah — itulah bedanya dengan width: 100% yang memaksa gambar kecil ikut membesar.
2. height: auto: memerintahkan browser menghitung ulang tinggi dari intrinsic ratio terhadap lebar baru. Wadah 240px dengan gambar 8:5 menghasilkan tinggi 150px, dan rasio tetap terjaga.

Resep ini bekerja justru karena keduanya saling melengkapi. Coba hilangkan height: auto lalu paksa height: 200px dari aturan lain: lebar menyusut tetapi tinggi dikunci, dan gambar terlihat tertekan. Selama satu dimensi bebas (auto), rasio intrinsik selalu bisa menyelamatkan proporsi.

Atribut width dan height: Tiket Reservasi Ruang #

Resep CSS menyelesaikan gambar yang meluber, tetapi ada persoalan lain yang hanya bisa diselesaikan dari HTML: browser tidak tahu bentuk gambar sebelum berkasnya selesai dimuat. Teks di bawah gambar mula-mula menempel di tempat kosong, lalu terdorong jauh ke bawah begitu gambar tiba — pergeseran layout yang mengganggu dan tercatat sebagai metrik Cumulative Layout Shift (CLS) pada Core Web Vitals.

Solusinya sederhana: tuliskan dimensi intrinsik sebagai atribut.

<img
  src="pemandangan.svg"
  width="320"
  height="200"
  alt="Matahari terbenam di atas perbukitan">

Dengan kedua atribut ini, browser menghitung rasio 320:200 sejak halaman diurai, memesan ruang dengan bentuk yang benar, dan layout tidak bergeser saat gambar datang. Dua poin penting agar pemahamannya lurus:

• Atribut width/height bukan ukuran akhir. Browser modern menggunakannya sebagai sumber aspect ratio, dan CSS tetap berkuasa: resep max-width: 100% + height: auto di atas tetap menimpa ukuran tampilnya.
• Angka pada atribut harus sesuai dimensi asli berkas, bukan ukuran yang diinginkan desain — yang dibutuhkan browser hanyalah perbandingannya.

Ringkasan #

Setiap gambar membawa intrinsic size dan intrinsic ratio dari berkasnya, dan browser memakai rasio itu untuk menghitung dimensi yang dibiarkan auto. Resep max-width: 100% + height: auto bekerja karena membatasi satu dimensi sambil membiarkan rasio menghitung dimensi lainnya, sementara atribut width dan height di HTML memesan ruang sejak awal agar layout tidak bergeser. Persoalan berikutnya muncul ketika desain menuntut kotak dengan rasio berbeda dari gambarnya — paksaan ukuran membuat gambar tertekan, dan penyelesaiannya bernama object-fit.