调整画廊中的图像大小以适应行，但保持每个图像的纵横比答案

【问题标题】：Resizing images in a gallery to fit the rows but keeping the aspect ratio of each image调整画廊中的图像大小以适应行，但保持每个图像的纵横比
【发布时间】：2014-06-11 04:59:38
【问题描述】：

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

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

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

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

【问题讨论】：

只需使用 css 设置您想要的宽度（例如img { width:100px; }），不要输入高度值，然后他们会调整大小以保持比例
您想要THIS 之类的东西吗？ PS：有些图片很大，很快就完成了，所以你可能会等待它们加载:)
@Pete 谢谢，我可以用高度来做，但仍然需要计算它。你可能知道有这样的图书馆吗？
@BatuZet 不完全-这里缺少的空间由背景填充，但实际图像高度不同。我需要缩放它们以使每行具有相同的高度。
所以行也会被缩放。因为如果行大小比率（w/h）低于图像比率，并且如果将图像高度设置为行高，则图像将溢出。所以需要根据这个溢出的图像重新设置行宽。对吗？

标签： jquery css image resize image-gallery

【解决方案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 上的完整文档。

【讨论】：