Bootstrap 3：如何创建响应式方形缩略图div

Question

我使用Bootstrap 3的.thumbnail类创建了一个图像网格。关于图像大小调整，一切似乎都工作良好，并且列根据窗口大小而变化。唯一的问题是图像的大小都不同，并且纵向/横向都不同。这会导致尴尬的中断和缩略图div的“堆积”…

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS84aTlhMC5wbmcifQ==” alt =“这是我目前拥有的” >>>

我希望找到一种使用.thumbnail类创建SQUARE响应div网格的方法。因此，换句话说，由Bootstrap确定的宽度将反映在div的高度中。例如。缩略图图像的缩放比例为220px，因此包含该缩略图的div的高度也将设置为220px（并且缩略图图像的缩放比例最高为高度或宽度的八分之100％，具体取决于方向）。有点像这样：

] >>

这是我正在使用的基本代码：

<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" rel="group"><img src="<?php echo $image->url() ?>"></a>
    </div>
  </div>
</div>
非常感谢您可能提供的任何帮助。我也欢迎其他方法的建议。我什至尝试使用jquery同位素的砌体设置来解决堆积问题，但无法使其起作用：（

我使用Bootstrap 3的.thumbnail类创建了一个图像网格。关于图像大小调整，一切似乎都工作良好，并且列根据窗口大小而变化。 ...

Answer 1

您可以尝试这样的纯CSS方法。。

http://bootply.com/85737

Answer 2

我为引导程序创建了一个小插件，称为bootstrap-grid-h。您可以尝试使用它。这是CSS唯一的解决方案。您可以在这里找到它：bootstrap-grid-h

Answer 3

对于这样的事情，我建议使用砖石结构，这将为您带来pinterest的效果，其中图像将以块样式放置而不会中断。

例如：http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout

Answer 4

我认为找到了解决您问题的方法

请查看此链接