Saya menggunakan Bootstrap untuk membuat korsel, saya memiliki gambar yang besar sehingga ketika layar lebih kecil dari gambar, rasionya tidak terjaga.
Bagaimana saya bisa mengubahnya?
Berikut adalah kode saya:
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Saya membutuhkan gambar dengan lebar 100% tetapi tingginya tetap 500px (saya pikir itu 500px) ini berarti bahwa pada layar yang lebih kecil kita tidak melihat bagian paling kiri dan paling kanan dari gambar.
Saya mencoba memuat gambar dalam div dan menambahkan
overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
Tapi itu tidak berhasil
Terima kasih!
Masalahnya terletak di sini, pada CSS bootstrap:
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Setelah mengatur max-width: 100%;
gambar tidak akan lebih besar dari viewport. Anda perlu menimpa perilaku itu pada CSS Anda:
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
Perhatikan max-width: none;
yang ditambahkan di bagian bawah. Ini adalah nilai lebar-maks default dan tidak menetapkan batas.
[Berikut [1][1] biola Anda diperbarui.
Hapus tag img
di dalam item carousel dan tambahkan latar belakang. Dengan cara ini Anda dapat menggunakan properti penutup CSS3.
.item1 {
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Saya dapat mencapai hal ini dengan mengomentari baris ketinggian dari baris carousel.css seperti yang ditunjukkan di bawah ini:
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}