Jak ustawić wysokość miniaturek bootstrap na Twitterze?

Question

Mam problemy z konfiguracją modułu Thumbnail dla mojej osobistej witryny internetowej. Używam twitter bootstrap (3.0) do mojego projektu i nie mogę dokończyć konfiguracji modułu Thumbnail.

Szerokość jest dobra, ale nie mogę ustawić wysokości miniatur (nie mogę wyrównać wszystkich miniatur o tej samej wysokości)

W jaki sposób ustawić jedną (standardową) wysokość dla wszystkich miniatur i powiększać/skalować obraz do środka, aby wypełnić całą przestrzeń bez rozciągania obrazu?

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

Answer 1

albo w CSS:

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

lub inline:

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

Answer 2

Z SCSS, można po prostu:

@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; }} 

Answer 3

Hej Szukałem na swoje pytanie , ponieważ miałem sa mi problem w Bootstrap, gdzie jeśli jedna z wysokości <div> jest wyższa od drugiej, siatka nie wyświetla się poprawnie. Pomyślałem, jak rozwiązać problem wyrównania miniatur i myślę, że wiele osób może używać właściwości CSS Flex.

W dziale class="row" dodano style="display:flex; flex-wrap: wrap;". Zasadniczo mój kod wygląda następująco:

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

Więc można mieć różne wysokości miniaturek i będzie on wyświetlany poprawnie, może nie tak jQuery Masonry, ale przynajmniej lepiej.