html - 具有最大高度的流体肖像图像

Question

我在使用最大高度时遇到一些流体图像问题。我正在尝试将图像绑定(bind)在一个最大为 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 的响应式解决方案。

Answer 1

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

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

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

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

http://www.sink140.com/sf-test/single.html

我的主要观点是不要想着试图控制高度，只要控制容器，让图像填充它，通过调整容器的宽度(使其变小)自然地降低图像的高度。

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

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