Bootstrap 3: Comment créer sensible, carré .miniature divs

J'ai créé une grille d'images à l'aide de Bootstrap 3 .vignette de classe. Tout semble fonctionner parfaitement en ce qui concerne les images le redimensionnement et les colonnes changeantes en fonction de la taille de la fenêtre. Le seul problème est que les images sont toutes de tailles différentes, et à la fois portrait/paysage. Cela provoque des pauses maladroites et "pile-up" avec la vignette divs...

J'espérais trouver un moyen de créer une grille de CARRÉS sensible divs en utilisant le .vignette de classe. Donc, en d'autres termes, la largeur déterminée par Bootstrap serait en miroir dans le div de la hauteur. E. g. la vignette de l'image est réduite à 220px ainsi, la hauteur de la div contenant il serait mis à 220px (et de la vignette de l'image à l'intérieur des échelles jusqu'à 100% de huit, la hauteur ou la largeur, en fonction de l'orientation). Un peu comme ceci:

Voici le code de base que j'utilise:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-3">
      <a href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" class="thumbnail fancybox" ><img src="<?php echo $image->url() ?>"></a>
    </div>
  </div>
</div>

Merci beaucoup pour toute aide que vous pourriez être en mesure d'offrir. Je suis aussi ouvert à des suggestions pour d'autres approches. J'ai même essayé d'utiliser jquery Isotope maçonnerie paramètre pour résoudre le tas problème, mais ne pouvais pas le faire fonctionner 🙁

OriginalL'auteur ornmnt | 2013-10-21