jquery - 调整图库中图像的大小以适应行，但保持每个图像的纵横比

Question

我需要显示一组大小大致相似但不完全相等且纵横比也不同的图像库。

我想将它们显示在可变高度的行中，但所有行的总宽度都相同，适合屏幕尺寸。每个图像都可以缩放(理想情况下尽可能小)以保持纵横比以适合其行的高度。

有没有简单的方法或者库(或 jQuery 插件或 AngularJS 指令)？

我检查了几个模仿 Pinterest 设计的库，但是它们使用固定列宽而不是固定行宽。这对于无限滚动非常有用，但不适合显示固定大小(5-50 张图像)的小型画廊。

Answer 1

实际上，我开发了一个插件。到目前为止是一个 jQuery 插件，但是 AngularJS 版本很快就会出现。它被称为 jPictura .

见一个 working example here 。我相信它完全可以满足您的需求，而且它的用法非常简单:

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0, justifyLastRow: true, idealRowHeight: 200}
    });
});

<div id="my-gallery">
    <div class="item"><img src="foo.jpg" /></div>
    <div class="item"><img src="bar.jpg" /></div>
</div>

请参阅 GitHub 上的完整文档.