Mempertahankan rasio aspek gambar dalam korsel

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;
}

http://jsfiddle.net/DRQkQ/

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!

icedwater
Pertanyaan edit 25 Juni 2013 в 6:41
Pemrograman
html css twitter-bootstrap
25 Juni 2013 в 6:37
14 tayangan
Larutan

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.

Komentar (2)

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;
}
Simple Sandman
Jawaban edit 30 Agustus 2014 в 6:07
Komentar (0)

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;*/
}
Komentar (0)