液体布局：100％max-width img未应用 - 为什么？

Question

我对这种流畅的布局很新。我注意到，就像我们大多数人一样，虽然我的大多数布局组件“液化”，但不幸的是，图像不会。

所以我试图在几个地方建议的图像上使用max-width: 100%。

但是，尽管img 容器的max-width和min-height定义，但 img 不会缩放。

如果您在广泛的分辨率下看到它，您会注意到“孩子图像”，例如，不会缩放。

关于问题可能是什么的任何线索，为什么这个图像不能扩展？

测试案例

浏览器： Firefox 15.0 / Chrome 21.0

IOS： MAC OS X Lion - 10.7.3

分辨率： 1920x1200

我得到了什么： 我得到一个图像，直到它的容器结束才能缩放。 img宽度不适合包含它的article元素。

我的期望： 我希望图像放大，直到它到达容器的末端。 在视觉上，我希望图像与下面的段落一样宽，图像的右侧与下面段落的右侧保持垂直对齐。

Answer 1

我认为你误解了max-width的作用。

max-width:100%表示“此元素的最大宽度可以是其容器的100％”。任何自然较小的东西都不会受到影响。这就是你现在所拥有的，它正常运作。如果您使用max-width:800px，则意味着“永远不要让此图像超过800像素宽”，它不会强制800px宽度，这就是width的用途。

width:100%表示“此元素应始终为其容器的100％宽度”。通常较小的任何东西现在必须占据整个宽度。任何更大的东西都会缩小到容器的宽度。

对于您的情况，只需使用width:100%并调整实际图像的大小以适合实际最大值（并为容器选择合理的最大宽度）。按比例缩小图像通常看起来比按比例放大更好，但在针对移动设备进行优化时，您可能希望做相反的事情。

您通常将max-width:100%视为默认样式的原因是图像不会超出其容器并破坏布局，因为图像通常按其实际宽度自然调整大小。

Answer 2

对我来说，通过调整视口大小来缩放图像。但不是max-width，而是使用宽度。但它适用于两者。

Answer 3

如果我有宽度为300像素的图像（意味着图像的宽度为300像素，则表示图像的宽容为300像素），我的理解是保守的。

现在这个图像位于div的内部，其宽度为其容器的40％（在我的情况下是正文）

如果我给我的img widht：100％意味着如果我的div是500px（整个身体宽度的40％）宽度我的图像将与其容器（在我的情况下为div）的宽度相同。

如果我给img max-width：100％这意味着我的图像的最大宽度将始终为300px（换句话说，它创建时的原始宽度是什么）

max-widht确实有助于保持图像的px清晰度