css - 流式布局 : 100% max-width img not applied - why?

Question

我对这种流式布局完全陌生。我注意到，和我们大多数人一样，虽然我的大部分布局组件都“液化”了，但不幸的是，图像却没有。

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

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

如果您在宽分辨率下查看它，您会注意到“ child 图像”等不会缩放。

关于问题可能是什么的任何线索，为什么该图像无法缩放？

测试用例:

浏览器: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，这意味着“永远不要让这个图像超过 800px 宽”，它不会强制宽度为 800px，这就是 width是为了。

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

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

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