我有一个使用百分比宽度创建图像列的网站。我们希望图像的最大高度等于它们的最大宽度。也就是说，如果图像容器的宽度为33.33％，并且达到125px，我们希望图像的最大高度相同，这样所有图像的长边总是相同的长度，无论其纵横比或方向如何。
我已经看到了通过使用填充和绝对定位元素来维护块宽高比的各种示例：
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
但是，这会创建一个具有固定比率的框，该框不会以“最小/最大”方式运行。
我们可以在此处找到具有不同宽高比图像的列表类型示例：http://jsfiddle.net/sxk4bh6f/1/
理想情况下，我们希望不使用Javascript。
澄清：
如果包含列表的元素为1000px，而列表项的宽度为33.33%，则它们将为333.3px宽。列表项内部是一个Image容器，无论填充/边距（我们暂不讨论），它们的宽度为100%或333.3px。其中的图像具有CSS，使其保持纵横比，max-width:100%，使图像的最大宽度为333.3px。这很简单。但是，纵向图像虽然最大宽度为333.3px，但可能会增长到高于此值的高度。
我们的目标是让图像的最大高度与图像的最大宽度相同，而不是明确地设置它（允许列表容器的大小在1000px之上和之下，这反过来使得列出项目的宽度变化，这反过来会使图像的最大高度发生变化。
最后一次澄清：
列表中有两个图像。列表容器的宽度为500px，列表项的宽度设置为50%。这意味着列表项仅分配250px宽度。如果两个图像都是2:1纵横比，但一个是纵向，一个是横向，则纵向图像应保持宽高比而不剪裁，并且不超过分配的宽度：250px。这样任何单个图像的高度都不会超过其容器的分配宽度。
如果列表容器然后展开到1000px，则每个列表项将被分配500px。因此，横向图像将扩展为500px宽，纵向图像将扩展为500px高。
我们的目标只是在CSS中实现这一点，没有Javascript。
更新后的链接：之前我的错误示例链接。我已在上面更新了它。下面的链接是一个链接到一个维护div的纵横比的例子，我们试图用它来实现这一点。但它没有用。
进度：
通过在图像周围添加一个包装器（呃，我不确定我喜欢修改html），我能够完成大多数的所需。
http://jsfiddle.net/4crswgxx/3/
但是，如果图像没有宽度/高度分辨率，它将不会填充到顶部/底部边缘（即：如果一个图像是横向100px宽，另一个是横向200px宽，并且列表项宽度是150px，200px将延伸到两侧，但200px将不会）。这可以通过设置width: 100%来缓解，但是如果我们翻转并说我们正在谈论高度，那么我们必须对高度做同样的事情，此时，我们得到的图像都是扭曲的并且在正方形中