Saya mencoba mereplikasi efek yang sama dengan yang dimiliki situs web ini: http://www.knockknockfactory.com/
Ketika lebar browser diubah ukurannya, gambar secara otomatis menjadi lebih kecil tetapi tinggi area yang ditempati tetap sama.
Ketika saya mencoba meniru ini, gambar saya juga menjadi lebih kecil tetapi tingginya berubah?
Kode saya sejauh ini adalah:
<div id="image"><img src="cover.png" /></div>
CSS:
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
Bagaimana cara membuat gambar saya berkurang/meningkat pada saat browser mengubah ukurannya tetapi tetap memiliki tinggi yang sama menggunakan CSS seperti di situs web itu?
Saya telah menggunakan Gambar Latar Belakang Halaman Penuh Sempurna untuk menyelesaikan hal ini di situs sebelumnya.
Anda dapat menggunakan background-size: cover; jika Anda hanya perlu mendukung browser modern.
Anda harus belajar tentang kueri Media untuk CSS. Situs yang Anda rujuk menggunakan hal yang sama. Situs ini pada dasarnya menggunakan CSS yang berbeda setiap kali ukuran jendela browser berubah. Berikut ini tautan untuk contohnya
Situs web yang Anda tautkan tidak mengubah lebar gambar, tetapi benar-benar memotongnya. Untuk itu perlu ditetapkan sebagai gambar latar belakang.
Untuk info lebih lanjut tentang background-image
lihat di http://www.w3schools.com/cssref/pr_background-image.asp
Penggunaan:
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}