jquery - images - ¿Cómo puedo configurar la altura para las miniaturas de inicio de Twitter?

img responsive bootstrap 4

Question

Tengo problemas para configurar el módulo de miniaturas para mi sitio web personal. Uso twitter bootstrap (3.0) para mi proyecto y no puedo terminar de configurar el módulo de miniaturas.

El ancho está bien, pero no puedo establecer la altura de las miniaturas (no puedo alinear todas las miniaturas a la misma altura).

¿Cómo puedo configurar una altura (estándar) para todas las miniaturas y la imagen de zoom / escala en el centro para que puedan llenar todo el espacio sin estirar la imagen?

<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

Con SCSS, puede simplemente:

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

Hey, estaba mirando tu pregunta, porque he tenido el mismo problema en Bootstrap, donde si una de las <div> es más alta que la de la otra, entonces la cuadrícula no se muestra correctamente. Descubrí cómo solucionar el problema de alineación de miniaturas, y creo que mucha gente podría estar usando la propiedad CSS Flex.

En la class="row" div class="row" agregué style="display:flex; flex-wrap: wrap;" . Básicamente, mi código se ve así:

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

Así que puedes tener diferentes alturas de miniaturas y se mostrará correctamente, tal vez no como jQuery Masonry , pero al menos mejor.

Answer 3

ya sea en css:

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

o en línea:

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