Как установить высоту для миниатюр для начальной загрузки Twitter?

У меня возникла проблема с настройкой модуля Thumbnail для моего личного сайта. Я использую twitter bootstrap (3.0) для моего проекта, и я не могу закончить настройку модуля Thumbnail.

Ширина в порядке, но я не могу установить высоту эскизов (я не могу выровнять все миниатюры как одну и ту же высоту).

Как я могу установить одну (стандартную) высоту для всех миниатюр и масштабирования/масштабирования изображения в центр, чтобы они могли заполнять все пространство без растягивания изображения?

<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="img.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="blue.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->

Ответ 1

либо в css:

.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire

или inline:

<img src="img.png" alt="..." style="min-height:50px;height:50px;" />

Ответ 2

Эй, я смотрел на ваш вопрос, потому что у меня была такая же проблема в Bootstrap, где, если одна из высоты <div> выше, чем другая, то сетка не отображается должным образом. Я понял, как исправить проблему выравнивания эскизов, и я думаю, что многие люди могут использовать свойство CSS Flex.

В div class="row" я добавил style="display:flex; flex-wrap: wrap;". В принципе, мой код выглядит следующим образом:

<div class="row" style="display:flex; flex-wrap: wrap;">
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>  
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>
  .. any number of thumbnails you want
</div>

Таким образом, вы можете иметь разные высоты эскизов, и он будет отображаться правильно, возможно, не как jQuery Masonry, но, по крайней мере, лучше.

Ответ 3

С помощью SCSS вы можете просто:

@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}