css - Bootstrap 3 : How to create responsive, 方形 .thumbnail div

Question

我使用 Bootstrap 3 的 .thumbnail 类创建了一个图像网格。在调整图像大小和根据窗口大小更改列方面，一切似乎都很好。唯一的问题是图像的大小各不相同，并且纵向/横向都是。这会导致缩略图 div 出现尴尬的中断和“堆积”……

我希望找到一种使用 .thumbnail 类创建方形响应式 div 网格的方法。所以换句话说，由 Bootstrap 确定的宽度将反射(reflect)在 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 Isotope 的砌体设置来解决堆积问题，但无法让它工作:(

Answer 1

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

http://bootply.com/85737

但是，这不是跨浏览器兼容的，因此您可能仍想使用 Isotope 插件。这是一个使用 Isotope + Bootstrap 的工作示例。

http://bootply.com/61482