web-dev-qa-db-fra.com

Comment puis-je définir la hauteur pour Twitter bootstrap miniatures?

J'ai du mal à configurer le module de vignettes pour mon site Web personnel. J'utilise Twitter bootstrap (3.0) pour mon projet et je ne peux pas terminer la configuration du 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 agrandir/redimensionner 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 -->
jqueryhtmlcsstwitter-bootstrapthumbnails
27
Ion Ungurean

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;" />
28
Neil S

Hé, je regardais votre question, car j'ai eu le même problème dans Bootstrap où si l'un des <div> est plus haut que l'autre, la grille ne s'affiche pas correctement. J'ai compris comment résoudre le problème d'alignement des vignettes, et je pense que de nombreuses personnes pourraient utiliser la propriété CSS Flex.

Dans la div class="row" J'ai ajouté style="display:flex; flex-wrap: wrap;". Fondamentalement, 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 sous la forme jQuery Masonry , mais au moins mieux.

9
Juan Camilo Guarin P

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; }}
2
Rodolfo Jorge Nemer Nogueira