Bootstrap 3'te ölçeklenen duyarlı bir görüntü nasıl oluşturulur?

Şu anda twitter bootstrap 3 kullanıyorum ve duyarlı bir görüntü oluşturmak için bir sorunla karşı karşıyayım. img-responsiveSınıfı kullandım . Ancak görüntü boyutu ölçeklenmiyor. width:100%Bunun yerine kullanırsam max-width:100%mükemmel çalışıyor. Sorun nerede? Bu benim kodum:

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

Bootstrap'in duyarlı görüntü sınıfı max-width% 100 olarak ayarlanır . Bu, boyutunu sınırlar, ancak görüntünün kendisinden daha büyük ana öğeleri doldurmaya zorlamaz. widthYükseltmeyi zorlamak için özniteliği kullanmanız gerekir .

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

Kesin şeyler!

.img-responsive bootstrap ile görüntüleri duyarlı hale getirmenin doğru yoludur 3 Duyarlı hale getirmek istediğiniz resim için bazı yükseklik kuralı ekleyebilirsiniz, çünkü sorumlulukla, yükseklik boyunca genişlik değişiklikleri, düzeltin ve işte buradasınız.

Yine de size yardımcı olup olmadığından emin değilim ... ama görüntüyü büyütmek için küçük bir numara yapmak zorunda kaldım ama duyarlı olmasını sağladım

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

}

Umarım PS'ye yardımcı olur Maksimum genişlik istediğiniz herhangi bir şey olabilir

Görüntü üzerinde sabit bir genişlik ayarlamak bir seçenek değilse, işte alternatif bir çözüm.

Display: table & table-layout: fix içeren bir üst div'e sahip olmak. Ardından görüntüyü gösterilecek şekilde ayarlayın: tablo hücresi ve maksimum genişlik% 100'e. Bu şekilde görüntü, üst öğesinin genişliğine sığacaktır.

Misal:

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

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

CSS stil sayfanızda aşağıdakileri deneyin:

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

Bunu yapmaya çalışın:

1) index.html'nizde

<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) Tarzınızda.css

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

Görüntüye .col sınıfını koyabileceğinizi öğrendim hile yapacak - ancak bu, float left gibi sınıfla ilişkili diğer özelliklerle birlikte fazladan dolgu sağlar, ancak bunlar örneğin bir dolgu yok diyerek iptal edilebilir ek olarak sınıf.

Sanırım görüntü bozuk. Örnek: görüntü boyutu 195 piksel X 146 pikseldir.

Tabletler gibi daha düşük çözünürlüklerde çalışacaktır. 1280 X 800 çözünürlüğe sahip olduğunuzda,% 100 genişlik olduğu için daha büyük olacaktır. Simge yazı tipleri gibi medya sorgusu içindeki CSS belki en iyi çözümdür.