Bootstrap отзывчивая высота вопрос

Question

Мне трудно понять, что происходит с некоторыми изображениями при использовании бутстрапа 3, поэтому надеемся, что кто-то сможет объяснить.

У меня есть следующий код, чтобы стиль некоторых изображений

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

Результат выглядит следующим образом

Почему первое изображение на втором ряду имеет более высокую высоту, чем все другие изображения? Изображение является точно такой же размер, как и другие (640х480)

Как я могу гарантировать, что все изображения (независимо от тир размеров) масштабируются до того же размера, выровнять и изменить размер надлежащим образом, когда изменения точки останова? Может ли bootstrap предложить специальный класс для достижения этого или есть что-нибудь там, которое я могу использовать?

Благодаря

Edit * я теперь создал скрипку, чтобы показать мою проблему, ее можно посмотреть здесь https://jsfiddle.net/muncher39/um04cwmp/1/. Изображения, используемые в скрипке, - это те же самые изображения, которые я использую на своем сайте. Оказывается, что размеры изображения не все одинаковые, но они все еще не уверены, почему это должно быть проблемой?

размеров изображения являются

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

Поместите их в обертке DIV (одна обертки сНа на изображение), и установить их на фон обложку для отдельных див изображения - выровнен центра, центр. Установите переполнение на скрытые в div контейнера изображения. Установите размер контейнеров изображений на ширину: 100% и высоту до фиксированной суммы. Изображения будут обрезаны по краям, если они являются неправильным соотношением сторон, но они всегда будут соответствовать постоянной высоте. Ширина будет определяться шириной столбца, и при изменении размера окна они не будут искажаться.

Поскольку вы хотите, чтобы он был динамичным, вам просто нужно установить пути изображения (и некоторые из css) с помощью JS/jQuery, как показано.

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