Come posso impostare l'altezza per le miniature di bootstrap di Twitter?

Question

Ho problemi con la configurazione del modulo Thumbnail per il mio sito web personale. Uso twitter bootstrap (3.0) per il mio progetto e non riesco a completare la configurazione del modulo Thumbnail.

La larghezza è ok, ma non è possibile impostare l'altezza delle miniature (non è possibile allineare tutte le miniature con la stessa altezza).

Come è possibile impostare un'altezza (standard) per tutte le miniature e l'immagine di zoom/scala al centro in modo che possano riempire tutto lo spazio senza allungare l'immagine?

<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

sia in css:

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

o inline:

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

Answer 2

Con SCSS, si può semplicemente:

@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

Hey stavo guardando la tua domanda , perché ho avuto il sa problema in Bootstrap dove se una delle altezze dello <div> è superiore a quella dell'altro, la griglia non viene visualizzata correttamente. Ho capito come risolvere il problema di allineamento delle miniature e penso che molte persone potrebbero utilizzare la proprietà CSS Flex.

Nel div class="row" ho aggiunto style="display:flex; flex-wrap: wrap;". In sostanza, il mio codice simile a questo:

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

modo da poter avere diverse altezze in miniatura e verrà visualizzato correttamente, forse non come jQuery Masonry, ma almeno meglio.