Comment puis-je définir la hauteur des vignettes Twitter bootstrap ?

Question

J'ai des difficultés à configurer le module Thumbnail pour mon site web personnel. J'utilise twitter bootstrap (3.0) pour mon projet et je n'arrive pas à finir de configurer le module Thumbnail.

La largeur est correcte, mais je ne peux pas définir la hauteur des vignettes (je ne peux pas aligner toutes les vignettes à la même hauteur).

Comment puis-je définir une hauteur (standard) pour toutes les vignettes et zoomer/réduire l'image au centre afin qu'elles puissent remplir tout l'espace sans étirer l'image ?

<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

Soit en css :

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

ou en ligne :

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

Answer 2

J'ai regardé votre question, car j'ai eu le même problème avec Bootstrap : si l'un des éléments de l'arborescence de l'image de marque de l'entreprise est modifié, il n'est pas possible de le modifier. <div> Si la hauteur de l'un est supérieure à celle de l'autre, la grille ne s'affiche pas correctement. J'ai trouvé comment résoudre le problème de l'alignement des vignettes, et je pense que de nombreuses personnes pourraient utiliser la propriété CSS Flex.

Dans le div class="row" J'ai ajouté style="display:flex; flex-wrap: wrap;" . En gros, mon code ressemble à ceci :

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

Ainsi, vous pouvez avoir différentes hauteurs de vignettes et elles s'afficheront correctement, peut-être pas aussi jQuery Masonry mais au moins mieux.

Answer 3

Avec SCSS, vous pouvez simplement :

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