堆叠不同大小的图像，保持它们的大小

Question

简而言之，我正在尝试完成https://artsy.net/browse/artworks 的方式？竖起大拇指。

我已经疯狂地尝试用 bootstrap 3 做不同的事情。但我开始认为这必须用 JS 来完成（？？）。

我的第一选择是使用一个预制的 jQuery 插件，但没有找到。

经过多次尝试，我现在可能要失明了。我不是要求确切的解决方案，我只是需要一些关于要查看或搜索的内容的指示。

Answer 1

我会先搜索“Bootstrap Thumbnail Grid”。

为了让您开始，.thumbnail > img 将导致图像占用 100% 的占位符。
如果您将缩略图放在具有相同宽度的响应列中，它们应该对齐：

<div class="row">
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
        <img src="http://placehold.it/400x200" alt="..." />
        </a>
    </div>
    <div class="col-xs-3">
         <a href="#" class="thumbnail">
        <img src="http://placehold.it/300x150" alt="..." />
        </a>
    </div>
    <!-- More columns -->
</div>

Working demo in jsFiddle