Cara membuat gambar responsif yang juga berskala di Bootstrap 3

Saat ini saya menggunakan twitter bootstrap 3 dan saya menghadapi masalah untuk membuat gambar responsif. Saya telah menggunakan img-responsivekelas. Namun ukuran gambar tidak ditingkatkan. Jika saya menggunakan width:100%alih-alih max-width:100%maka itu berfungsi dengan sempurna. Dimana masalahnya? Ini kode saya:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Kelas gambar responsif Bootstrap disetel max-widthke 100%. Ini membatasi ukurannya, tetapi tidak memaksanya meregang untuk mengisi elemen induk yang lebih besar dari gambar itu sendiri. Anda harus menggunakan widthatribut untuk memaksa peningkatan.

http://getbootstrap.com/css/#images-responsive

Tentu!

.img-responsive adalah cara yang tepat untuk membuat gambar responsif dengan bootstrap 3 Anda dapat menambahkan beberapa aturan ketinggian untuk gambar yang ingin Anda jadikan responsif, karena dengan tanggung jawab, lebar berubah sepanjang ketinggian, perbaiki dan begitulah.

Tidak yakin apakah itu masih membantu Anda ... tetapi saya harus melakukan trik kecil untuk membuat gambar lebih besar tetapi menjaganya tetap responsif

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Semoga membantu PS Lebar maksimal bisa apa pun yang Anda suka

Jika mengatur lebar tetap pada gambar bukan merupakan pilihan, berikut adalah solusi alternatif.

Memiliki div induk dengan display: table & table-layout: fixed. Kemudian atur gambar untuk ditampilkan: table-cell dan max-width menjadi 100%. Dengan cara itu gambar akan sesuai dengan lebar induknya.

Contoh:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Biola: http://jsfiddle.net/5y62c4af/

Coba yang berikut ini di stylesheet CSS Anda:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Coba lakukan itu:

1) Di index.html Anda

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) Dalam style.css Anda

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Saya menemukan bahwa Anda dapat meletakkan kelas .col pada gambar akan melakukan trik - namun ini memberikan bantalan tambahan bersama dengan atribut lain yang terkait dengan kelas seperti float left, namun ini dapat dibatalkan dengan mengatakan misalnya tanpa padding kelas sebagai tambahan.

Saya kira gambar lebih dari rusak. Contoh: ukuran gambar adalah 195px X 146px.

Ini akan bekerja di dalam resolusi yang lebih rendah seperti tablet. Bila Anda memiliki resolusi 1280 X 800 itu akan memaksa lebih besar karena ada juga lebar 100%. Mungkin CSS di dalam kueri media seperti font ikon adalah solusi terbaik.