Gambar adalah bagian terbesar dari media di web, tetapi bukan satu-satunya: video yang mengalir, peta yang disematkan lewat iframe, dan grafik interaktif semuanya wajib ikut menyusut mengikuti layar. Kabar baiknya, peralatan yang sudah kita kuasai — max-width: 100%, aspect-ratio, dan object-fit — langsung berlaku untuk mereka. Chapter penutup section ini membahas tiga pola terakhir: video responsif, iframe dengan rasio terjaga, dan image-set() untuk layar beresolusi tinggi, lalu membuka jalan menuju section berikutnya tentang pseudo-classes.
Video: width 100% dan Rasio Terjaga #
Elemen <video> adalah replaced element dengan ukuran intrinsik, persis seperti <img>. Artinya, resep lama kita bekerja tanpa perubahan apa pun:
.video-utama {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}Dua salinan video yang sama ditaruh di kolom berbeda lebar:
Banyak reset CSS modern bahkan memasangkan img, video { max-width: 100% } sebagai pengaman global, dan setelah membaca chapter Width, Height, dan Intrinsic Ratio kini kita tahu persis mengapa aturan semacam itu aman.
Iframe: Rasio Terjaga dengan aspect-ratio #
iframe berperilaku berbeda: konten di dalamnya adalah dokumen terpisah tanpa ukuran intrinsik yang bisa dibaca, sehingga tanpa aturan apa pun browser memberinya ukuran default 300x150. Rasio 16:9 khas video semacam YouTube harus kita tetapkan sendiri:
.wadah-embed {
aspect-ratio: 16 / 9;
}
.wadah-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}Demo berikut memakai pola .wadah-embed di atas dengan “video” yang disimulasikan gradien, lengkap dengan tombol putar dari segitiga CSS murni:
Perkecil dan perbesar jendela demo: proporsi 16:9 tetap terkunci tanpa satu nilai height pun. Pola dua lapis ini — wadah pembentuk rasio plus anak yang mengisi — adalah cara baku menempatkan embed di halaman responsif; persis bentuk inilah yang menampung iframe sungguhan, tinggal ganti isi wadahnya.
Catatan Sejarah: Padding-top Hack #
Sebelum aspect-ratio tersedia (resmi pada 2021), rasio video dijaga dengan sebuah trik yang masih banyak ditemukan di kode lama:
/* pola klasik pra-2021 — kenali bila menjumpainya */
.wadah-video-lama {
position: relative;
padding-top: 56.25%;
}
.wadah-video-lama > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}Mekanismenya: persentase pada padding-top selalu dihitung dari lebar induk, sehingga 56.25% — hasil 9 dibagi 16 — membuat kotak tumbuh setinggi 9 unit untuk setiap 16 unit lebar. Iframe kemudian diposisikan absolut menutupi seluruh kotak itu. Trik ini bekerja, tetapi angka 56.25% menyembunyikan maksudnya; aspect-ratio: 16 / 9 menyatakan niat yang sama secara langsung. Tidak perlu menulis ulang kode lama yang sudah berjalan, tetapi untuk kode baru, pilih yang modern.
image-set(): Satu Property untuk Beberapa Resolusi #
Layar modern punya kepadatan piksel berbeda: layar biasa merender satu piksel CSS sebagai satu piksel fisik, layar retina memakai dua atau tiga. Untuk gambar background, fungsi image-set() membiarkan browser memilih berkas yang paling pas — didukung semua browser terbaru, dengan catatan periksa dukungan bila masih harus melayani browser lama:
.latar-tajam {
background-image: image-set(url("kota.jpg") 1x, url("kota-2x.jpg") 2x);
}Untuk gambar konten (<img>), mekanisme pemilihan berkas serupa sudah disediakan HTML lewat atribut srcset dan elemen <picture>; keduanya di luar cakupan CSS murni, tetapi layak diingat sebagai pasangan dari image-set().
Penutup Section: dari Media ke Pseudo-Classes #
Section Images dan Media kini utuh: kita menghias gambar (styling, caption), mengendalikan ukurannya (intrinsic ratio, max-width), memasangkannya dengan kotak (object-fit, object-position, aspect-ratio), merakitnya menjadi kartu, memperlakukannya sebagai background, dan menutup dengan media lain. Sepanjang jalan itu, satu benang merah terus muncul: efek :hover pada galeri dan kartu. Interaksi semacam itu punya sistem aturannya sendiri — pseudo-classes untuk state seperti :hover dan :focus-visible, serta pseudo-elements untuk membentuk bagian baru dari elemen — dan itulah topik section berikutnya.
Ringkasan #
Video mengikuti resep gambar karena keduanya sama-sama replaced element, sedangkan iframe butuh wadah ber-aspect-ratio: 16 / 9 dengan anak yang mengisi penuh. Pola padding-top: 56.25% adalah warisan pra-2021 yang baik dikenali namun tidak perlu ditiru, dan image-set() menyelesaikan pemilihan berkas background per kepadatan layar dengan satu deklarasi. Dengan section ini selesai, perjalanan kita berlanjut ke Pseudo-Classes dan Pseudo-Elements — tempat semua state dan interaksi yang baru sekali kita intip menjadi materi utama.