Saya agak kesulitan untuk menemukan istilah yang sempurna untuk menyatakan “latar gambar yang ukurannya dapat mengikuti keadaan dengan kontainer setiap kali ukuran kontainer berubah”, jadi Saya sebut saja sebagai ‘responsif’ atau ‘adaptif’, meskipun istilah tersebut bekerjsama kurang tepat. Istilah fluid lebih tepat.
Ketika kita ingin membuat sebuah gambar menjadi fluid, kita dapat mengeset lebar gambar tersebut ke dalam satuan persen dan tinggi gambar sebagai auto untuk menjaga semoga ukuran tingginya tetap proporsional:
img { width:100%; height:auto; }Bagaimana dengan latar gambar? Kita dapat memakai properti background-size dengan nilai cover atau 100% auto. Hanya saja, di sini masalahnya yaitu kita tidak dapat membuat tinggi kontainer mengikuti tinggi latar gambar setiap kali lebar kontainer berubah:
div { background:transparent url('path/to/image.jpg') no-repeat 50% 0; background-size:100% auto; height:615px; }Rasio Ukuran Tinggi Proporsional
Ada sebuah metode yang dapat dipakai untuk membuat tinggi kontainer gambar dapat mengikuti tinggi latar gambar yang ada di dalamnya (di belakangnya), yaitu dengan cara mengeset ukuran tinggi kontainer menjadi 0 dan memilih nilai sebuah sisi padding vertikal dalam satuan persen untuk membuat ukuran tinggi kontainer palsu. Nilainya berupa hasil perbandingan antara tinggi gambar dengan lebar gambar dalam bentuk persen. Perhitungannya menyerupai ini:
Atau bila diterjemahkan ke dalam bahasa yang sederhana adalah: “Tinggi proporsional X yaitu sama dengan sekian persen dari lebarnya.”
Saya memakai gambar dengan ukuran lebar 800 piksel dan tinggi 615 piksel pada halaman demo, jadi:
Rasio Tinggi = 76.875%;
div { background:transparent url('path/to/image.jpg') no-repeat 50% 0; background-size:100% auto; height:0; /* Set tinggi kontainer menjadi `0` */ padding-bottom:76.875%; /* Gunakan `padding` untuk membuat dimensi tinggi */ }Catatan: Jika Anda telah menerapkan CSS Universal Box-Sizing, Saya sarankan Anda untuk menambahkan properti box-sizing dengan nilai content-box pada kontainer untuk mengembalikan kebijaksanaan box-model ke keadaan semula. Meskipun saat Saya coba tanpa menambahkan properti itu bekerjsama tidak ada masalah. Ini cuma untuk memantapkan saja:
div { background:transparent url('path/to/image.jpg') no-repeat 50% 0; background-size:100% auto; height:0; padding-bottom:76.875%; box-sizing:content-box; }Menambahkan Konten ke dalam Kontainer
Anda memerlukan sebuah elemen aksesori untuk diposisikan sebagai elemen absolute sebab kontainer yang kini sudah tidak mempunyai ruang lagi (tinggi kontainer kini yaitu 0 piksel):
HTML
<div class="container"> <div class="container-content">Konten di sini…</div> </div>CSS
.container { background:transparent url('path/to/image.jpg') no-repeat 50% 0; background-size:100% auto; height:0; padding-bottom:76.875%; box-sizing:content-box; position:relative; } .container-content { position:absolute; top:0; right:0; bottom:0; left:0; overflow:auto; }