Sebagian elemen HTML tidak berisi konten yang ditulis langsung di dalam dokumen. Elemen img adalah kotak kosong yang browser isi dengan berkas gambar dari luar; input dan textarea digambar oleh browser sebagai kontrol antarmuka. Kategori ini disebut replaced elements — elemen yang isinya diganti (replaced) oleh sumber daya eksternal. Karena isinya bukan teks biasa, replaced elements punya aturan ukuran tersendiri: ukuran intrinsik dan rasio aspek, yang membuat perilaku width dan height-nya berbeda dari elemen pada dua chapter sebelumnya.

Apa Itu Replaced Element #

Replaced element adalah elemen yang kontennya berada di luar cakupan CSS dokumen: browser menggantikan isi elemen dengan sumber daya lain (MDN: Replaced element ). Anggota utamanya:

  • img — gambar dari atribut src;
  • video dan iframe — konten media atau dokumen lain;
  • input, textarea, dan select — kontrol form yang digambar browser.

Dua ciri khasnya menentukan cara kita mengukurnya. Pertama, replaced element memiliki ukuran intrinsik: berkas gambar membawa lebar dan tinggi aslinya, misalnya 400×300 piksel. Kedua, dari ukuran intrinsik itu tersimpan rasio aspek — perbandingan lebar terhadap tinggi, misalnya 4:3 — yang dipakai browser saat salah satu dimensi kita ubah. Untuk elemen yang tidak membawa rasio dari berkasnya, CSS menyediakan properti aspect-ratio agar rasio tetap dapat dinyatakan secara eksplisit (MDN: aspect-ratio ).

Ukuran Intrinsik dan Rasio Aspek #

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    #img-asli { /* tanpa aturan ukuran: memakai ukuran intrinsik */ }
    #img-200 { width: 200px; /* tinggi mengikuti rasio 4:3 */ }
    #input-nama { width: 200px; }
  </style>
</head>
<body>
  <p>
    <img id="img-asli" src="ilustrasi-400x300.svg" alt="Ilustrasi lingkaran biru 400×300">
    <img id="img-200" src="ilustrasi-400x300.svg" alt="Ilustrasi yang dipadatkan menjadi 200px">
  </p>
  <p>
    <input id="input-nama" type="text" placeholder="Nama pengguna">
  </p>
</body>
</html>

Hasil di Browser (demo memakai gambar SVG inline, bukan berkas terpisah):

text 
Gambar pertama tampil selebar 400px setinggi 300px — persis ukuran
intrinsik berkasnya; computed display-nya inline.
Gambar kedua diberi width 200px; tingginya otomatis menjadi 150px
karena rasio aspek 4:3 dipertahankan.
Input teks menerima width 200px; computed display-nya inline-block.

Mari kita telaah aturan ukurannya:

  1. Baris 5 (#img-asli): tanpa width dan height, browser memakai ukuran intrinsik berkas — pada demo, SVG 400×300 piksel. Nilai computed width: 400px dan height: 300px mencerminkan ukuran asli tersebut.
  2. Baris 6 (#img-200 { width: 200px; }): hanya satu dimensi dinyatakan, maka browser menghitung dimensi satunya dari rasio aspek: 200 ÷ (4/3) = 150px. Properti height tidak perlu ditulis — dan justru sebaiknya dibiarkan agar rasio terjaga.
  3. Baris 7 (#input-nama { width: 200px; }): kontrol form menerima width meskipun termasuk elemen sejajar — perilaku yang pada elemen inline biasa mustahil terjadi.

Ketika kedua dimensi dipaksakan dan rasio berbeda dari aslinya, isi gambar akan terdistorsi. Di sinilah properti object-fit berperan untuk mengatur bagaimana gambar mengisi kotaknya (misalnya cover untuk memotong, contain untuk memuat utuh) — dasar-dasarnya kita singgung pada demo, dan pembahasan penuhnya menanti pada Section Modern CSS (MDN: object-fit ).

Replaced Element dan Display #

Replaced elements mengejutkan dari sisi tipe kotak. img bernilai display: inline secara bawaan, tetapi tetap menerima width dan height — pengecualian terhadap aturan Chapter Block dan Inline . Alasannya: yang diukur browser bukan teks di dalam elemen, melainkan kotak pengganti yang ukurannya telah pasti. Kontrol form seperti input bahkan dilaporkan browser sebagai inline-block.

Karena img dan kawan-kawannya sangat umum, memahami kategori ini membayar dividennya cepat: caption yang tidak bergeser, galeri yang rasionya terjaga, dan form yang lebarnya bisa diatur tanpa mengubah tipe kotaknya. Simpan pula kebiasaan menulis atribut width dan height pada img di HTML — browser memakai nilainya untuk menghitung rasio sebelum berkas gambar selesai diunduh, sehingga layout tidak melompat saat gambar tiba.