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

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

我的代码是：

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

有关完整代码和css，请参阅

---

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

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

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

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

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

我的主要观点是不再考虑控制高度，只需控制容器，让图像填充它，通过调整容器的宽度（使其变小），可以自然地降低图像的高度

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

---

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

您的图像已损坏，因此我尝试使用新图像。它的伸缩性很好，没有任何问题，你使用的是什么浏览器？我在windows上使用chrome v25.0.1364.97 m，图像适合我。你能不能在你的图片上多放一点。当然，这里是@Kev，你用的是风景图片。我的问题是关于肖像画的