Wie kann ich die Höhe für das Twitter bootstrap-thumbnails?

Ich habe Probleme beim einrichten der Thumbnail-Modul für meine persönliche website. Ich benutze twitter bootstrap (3.0) für mein Projekt und ich kann nicht beenden Aufbau der Thumbnail-Modul.

Die Breite ist okay, aber kann ich nicht die Höhe der thumbnails (kann ich nicht ausrichten alle thumbnails als die gleiche Höhe).

Wie kann ich eine (standard) - Höhe für alle miniaturen und vergrößern/skalieren von Bild zu zentrieren, so dass Sie können füllen Sie alle Raum ohne Dehnung ist das Bild?

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

InformationsquelleAutor der Frage Ion Ungurean | 2013-08-27

  1. 27

    entweder in css:

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

    oder inline:

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

    InformationsquelleAutor der Antwort Neil S

  2. 9

    Hey, ich war auf der Suche auf Ihre Frage, denn ich hatte das gleiche problem in der Bootstrap-wo, wenn einer der <div>'s Höhe ist höher als die andere ist, dann wird das raster nicht korrekt angezeigt wird. Ich habe herausgefunden, wie man den thumbnail-align-problem, und ich denke, viele Menschen könnten mit der CSS-Flex-Eigenschaft.

    In der div class="row" ich Hinzugefügt style="display:flex; flex-wrap: wrap;". Im Grunde, mein code sieht wie folgt aus:

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

    So können Sie verschiedene thumbnail-Höhe und es wird korrekt angezeigt, vielleicht nicht so jQuery Mauerwerkaber zumindest besser.

    InformationsquelleAutor der Antwort Juan Camilo Guarin P

  3. 2

    Mit SCSS, können Sie einfach:

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

    InformationsquelleAutor der Antwort Rodolfo Jorge Nemer Nogueira

Schreibe einen Kommentar