Bootstrap Duyarlı Yükseklik Sorunu

Question

Bootstrap 3 kullanırken bazı resimlerde neler olup bittiğini anlamak için çok zor bir zamanım var.

bazı görüntülerin stil aşağıdaki biçimlendirme var

   <div class="row footer-media"> 
      <div class="col-sm-6"> 
       <h5>Recent Videos</h5> 
      </div> 
      <div class="col-sm-6"> 
       <div class="title"> 
        <h5>@hallOfFame.GetPropertyValue("pageHeading")</h5> 
       </div> 
       @if (hallOfFame.HasValue("hallOfFameGallery")) 
       { 
        foreach (var image in hofMediaFolder.Children) 
        { 
         <div class="col-xs-6 col-sm-4 hof-images"> 
          <img class="img-responsive" src="@image.Url" alt="@image.Name" title="@image.Name" /> 
         </div> 

        } 
       } 
      </div> 
     </div> 

Neden ikinci satırda ilk görüntü hepsinden daha yüksek bir yüksekliğe sahip gelmez şöyle sonucudur diğer görüntüler görüntü i (bakmaksızın onların boyutları) tüm görüntüler aynı boyutta ölçekli emin doğru hizaya ve uygun olduğunda yeniden boyutlandırmak nasıl başkaları (640x480)

tam olarak aynı boyutta kesme noktası değişiklikleri? Bootstrap bunu başarmak için özel bir sınıf sunuyor mu yoksa kullanabileceğim bir şey var mı?

Teşekkür

ben artık sorunu göstermek için bir keman oluşturduk Düzen *

, burada https://jsfiddle.net/muncher39/um04cwmp/1/ görülebilir. Kemanda kullanılan görüntüler, sitemde kullandığım resimlerle aynı. Görüntü boyutlarının hepsinin aynı olmadığı ortaya çıkıyor, ancak bunun neden bir sorun olduğuna dair hala emin değilim? , Merkezi hizalanmış merkezi -

1.image5.jpg = 640x480 
2.image7.jpg = 640x480 
3.image1.jpg = 640x480 
4.image2.jpg = 640x480 
5.image4.jpg = 3888x2592 
6.image6.jpg = 1944x1296 
7.image3.jpg = 1944x1296 

Answer 1

bir sarıcı div (resim başına bir sarıcı div) koyun ve bireysel görüntü div için arka plan kapağına bunları şöyle

Resim boyutları vardır. Görüntü kabı div'lerinde gizlenecek taşma değerini ayarlayın. Görüntü kaplarının boyutunu genişliğe ayarlayın:% 100 ve yüksekliği sabit bir miktara. Yanlış en boy oranı ise, görüntüler kenarlardan kesilecektir - ancak her zaman tutarlı bir yüksekliğe sahip olacaktır. Genişlik, sütun genişliği tarafından kontrol edilecek ve pencereyi yeniden boyutlandırırken eğilmeyecektir.

Dinamik olmasını istediğinizden, yalnızca görüntü yollarını (ve bazı css) JS/jQuery ile gösterildiği gibi ayarlamanız gerekir.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
     <div class="col-xs-6 col-md-4 hof-images"> 
      <div class="image"></div> 
     </div> 
    </div> 
</div> 

CSS

.image { 
    margin-bottom:30px; 
    height:250px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
} 

JS

$('.image').eq(0).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 
$('.image').eq(1).css("background", "url(http://placehold.it/550x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 
$('.image').eq(2).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 
$('.image').eq(3).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 
$('.image').eq(4).css("background", "url(http://placehold.it/650x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 
$('.image').eq(5).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center"); 

Fiddle