Bootstrap 3.3.4 сетка изображения

Question

Я работаю над несколькими страницами с 15-20 изображениями на странице и ищу способ организовать его через сетку 4-3-1. Что-то вроде этого:

Fiddle preview для кода ниже.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 

    <!-- some more divs here --> 

    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 
    </div> 
</div> 

И я доволен этим взглядом, однако проблемы возникают, как только мы вводим изображения с немного разными размерами.

Fiddle preview для кодового блока ниже.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/300x150" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/350x125" class="img-responsive thumbnail"> 
    </div> 
    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/300x125" class="img-responsive thumbnail"> 
    </div> 

    <!-- some more divs here --> 

    <div class="col-sm-4 col-md-3"> 
     <img src="http://placehold.it/330x130" class="img-responsive thumbnail"> 
    </div> 
    </div> 
</div> 

Теперь детали. Я не знаю, как это сделать, но я вижу два возможных способа решения этой проблемы: а) изменить размер каждой отдельной картинки до «стандартного» (скажем, 350х150 пикселей) - и это нужно сделать на стороне браузера; или b) вертикально выровнять изображения внутри отображаемых строк, сетка 4-3-1 должна оставаться. Я тоже пытался объединиться с классом row-eq-height, но это не заставило меня далеко.

Как бы вы справились с этой проблемой и почему?

Благодарю вас за ваше время и знания.

Answer 1

несколько способов, вы могли бы смотреть на это делать. Если вы не хотите смотреть на изменение размера всех ваших изображений на одинаковые высоты и ширины.

Возможно, у вас есть следующие варианты использования: Fiddle Here.

Первое изображение (вверху слева) использует это ...

.image-1 { 
    background-image: url(http://placehold.it/550x350); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-color: bisque; 
} 

Используя это выше вы потеряют верхнюю часть покрытия и дно, но ваш блок будет оставаться такой же высоту и продолжает поступать с загрузчиком.

Тогда следующие 3 изображения используют это ...

.image-2 { 
    background-image: url(http://placehold.it/350x150); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Единственным отличием является background-size:, как вы можете видеть.

Когда мы используем background-position: center; мы фокусируем изображение на центре, и по мере изменения размера изображения он будет поддерживать фокус, но потеряет внешний вид изображения. Как вы увидите в Fiddle, если вы измените размер окна. Сделайте это (изменение размера), чтобы вы могли смотреть все изображения и как они действуют при изменении размера. У меня есть каждый div, чтобы установить общую высоту.

Существует еще один набор изображений под вашим основным набором, каждый из которых имеет одинаковый размер изображения, поэтому вы можете увидеть, как они изменяются вместе с вышеуказанными параметрами.

Очевидно, что использование бутстрапа и попытка использовать разные блоки высоты всегда будут проблемой, но эти демо-версии могут помочь вам сделать то, что вы хотите сделать здесь.

Answer 2

Похоже, проблема заключается в том, что вы помещаете все в одну строку. Если вы поместите только четыре изображения подряд, это будет работать даже при разных высотах изображения.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive thumbnail" /> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/300x150" class="img-responsive thumbnail" /> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/350x125" class="img-responsive thumbnail" /> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/300x125" class="img-responsive thumbnail" /> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/350x100" class="img-responsive thumbnail" /> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/300x150" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/320x120" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive thumbnail"> 
 
     </div> 
 
     </div> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/300x130" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/320x150" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/320x100" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/300x100" class="img-responsive thumbnail"> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/330x150" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/350x120" class="img-responsive thumbnail"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3"> 
 
      <img src="http://placehold.it/330x130" class="img-responsive thumbnail"> 
 
     </div> 
 
    </div> 
 
</div>