0

我对这种液体布局的东西完全陌生。我注意到，和我们大多数人一样，虽然我的大多数布局组件“液化”，但不幸的是，图像不会。

因此，我尝试max-width: 100%在几个地方使用建议的图像。

然而，尽管定义了max-width和min-height的 img container，但img不能缩放。

如果您以较宽的分辨率查看它，您会注意到例如“儿童图像”不会缩放。

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

测试用例：

浏览器：Firefox 15.0 / Chrome 21.0

IOS：MAC OS X Lion - 10.7.3

分辨率：1920x1200

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

我所期望 的：我希望图像会放大，直到它到达容器的末尾。从视觉上看，我希望图像与下面的段落一样宽，在某种程度上，图像的右侧与下面段落的右侧保持垂直对齐。

4

3 回答 3

1

我想你误解了什么max-width。

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

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

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

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

于 2012-08-30T22:04:31.923 回答
0

对我来说，您的图像随着视口大小的调整而缩放。但不要使用最大宽度，而是只使用宽度。但它适用于两者。

于 2012-08-30T18:53:27.270 回答
0

据我所知，如果我有一个 300 像素宽度的图像（意味着图像是这样创建的，宽度为 300 像素）

现在这个图像在一个 div 里面，它的宽度是它的容器的 40%（在我的例子中是 body）

如果我给我的 img widht:100% 这意味着说如果我的 div 是 500px（全身宽度的 40%）宽度，我的图像将与其容器（在我的情况下为 div）具有相同的宽度。

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

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

于 2014-07-16T06:15:53.563 回答