0

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

我的代码是：

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

有关完整代码和 css，请参阅http://jsfiddle.net/5fuZ5/。

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

4

1 回答 1

0

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

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

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

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

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

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

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

希望这有助于或至少给你另一个想法。

于 2013-04-04T16:29:20.660 回答