具有最大高度的流体人像图像答案

【问题标题】：fluid portrait images with max height具有最大高度的流体人像图像
【发布时间】：2013-04-05 00:29:20
【问题描述】：

我在使用最大高度时遇到了一些流体图像问题。我正在尝试将图像绑定在一个最多为 450x450 的框或任何与图像的纵横比不同的任意框中。发生的事情是图像的宽度被限制为 450 像素，但高度不是，并且图像溢出了包装器 div。

我的代码是：

<div class="wrapper">
    <div class="container">
        <img src="http://i.imgur.com/iw4yOa0.jpg"/>
    </div>
</div>

查看http://jsfiddle.net/5fuZ5/获取完整代码和css。

我知道我可以通过使用 jquery 来实现这一点，但我需要一个不需要 javascript 的响应式解决方案。

【问题讨论】：

【解决方案1】：

好的，我遇到了类似的问题，找不到任何帮助。我的情况是，我有一列流动的图像（适合其容器 100% 的宽度）适用于横向图像，但肖像是巨大的，因为它的宽度适合，因此又高又瘦的图像（肖像）有它宽度适合容器，从而使其非常高。

我的解决方案是考虑容器，如果在纵向图像的实例中我将容器设置为横向容器的 50%，那么当我将图像宽度（纵向时）适合较小的容器时，我会得到它们比例（ish）。

所以您想要使用 2 个容器，一个用于纵向和横向，横向一个将是您想要的最大宽度，即 450 像素。现在将您的肖像容器设置为宽度的一半，即 225px（宽度的一半），如果您的所有图像都具有相同的纵横比，那么它们应该都很好地匹配并为您提供结构化的网格 - 或者如果单列肖像图像将或多或少与风景图像一样高。

如果你想看到这个工作（短时间内）我会留下这个链接，这样你就可以看到我是如何解决它的。该示例是我正在制作的电子邮件（请不要抱怨糟糕的编码，它尚未完成）模板，其中我有单列图像（其响应式），包括纵向和横向 - 使用表格上包含的类肖像图像 (class=portrait)，但这很容易成为一个 div。

我的主要观点是停止考虑试图控制高度，只需控制容器，让图像填充它，通过调整容器的宽度（使其变小）你自然会降低图像的高度。

图像的纵横比通常将确保您可以预测布局，因为您有各种基线 - 纵向图像与横向图像相关。

希望这对您有所帮助或至少给您另一个想法。

【讨论】：