用照片填充固定尺寸的 div

Posted 2023-03-25

【中文标题】用照片填充固定尺寸的 div

【英文标题】：populating a fixed dimensions div with photos

【发布时间】：2014-02-11 02:33:37

【问题描述】：

我真的在为此苦苦挣扎。 我有一个固定尺寸（高度和宽度）的 div。 我想要填充 div 的照片数量不确定。它们的尺寸各不相同。只要它们保持纵横比，就可以调整它们的大小。 我想了解什么是填充 div 的最佳方式，以便理想情况下所有照片都适合它，并且“空白”或间隙最少。实际上，我更喜欢 div 之外的最小“泄漏”而不是间隙。 到目前为止，我已经尝试了很多小巷（砌体、google+ 风格、简单的 css），但我无法提出令人满意的解决方案。

编辑： 经过更多研究，我发现我正在寻找的实际上非常接近packing problem，但我发现最接近的问题是'在一个矩形中打包不同的矩形'，我需要一个解决方案来'打包不同的矩形在一个特定纵横比的矩形中。

那里有数学天才吗？

【问题讨论】：

可能有助于制作一个 jsfiddle 并发布一些代码

我最接近解决这个问题的是 Ed Lea 的“collagePlus”，但它只会将照片与宽度对齐，而不是高度：jsfiddle.net/yjJ8z/9

对这个问题仍然感兴趣？

【参考方案1】：

这是我用的..

html：

<img id="myImage" src="" style="max-height:100%; max-width:100%" />

javascript：

document.getElementById("myImage").src = imageName;

希望对您有所帮助... :)

【讨论】：

此 HTML 无效。