Question

如果我在body标签上设置了max-width css样式，并且body内部的图像比body的最大宽度宽，则图像将不遵循max-width。我希望图像调整大小，而不是隐藏溢出。

为什么？

你是如何解决这个问题的？

Answer 1

不会自动继承max-width。

如果您希望特定标签继承样式宽度，则必须明确指定它，如下所示：

body
{
    max-width: 200px;
}

img
{
    max-width: inherit;
}

编辑：这是规范http://www.w3.org/wiki/CSS/Properties/max-width

的链接

Answer 2

图片不会根据父max-width尺寸进行缩放。您需要缩放图像本身以适应内容，使其inherit为父宽度，或设置max-width:200px;

如果您不想缩放图片，但不希望父元素拉伸，只需使用overflow:hidden，图像的额外部分将被隐藏。

Answer 3

根据经验，在max-width标签上设置宽度（尤其是body）是不好的做法，原因我不会在这里进行。

在这种情况下，可以选择使用body标签来定义导致您头痛的宽度。

这是我的jsfiddle：http://jsfiddle.net/pRMzs/17/

获得所需效果的唯一方法是使用某种#container div（CSS无法定位body标记）。

为了在stackoverflow上显示答案......

编辑：请求图像流量达到容器大小的100％。只需将width: 100%添加到图像即可。给它一个特殊的课程，以避免对所有<img>的

产生这种影响

您需要的HTML是：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <div id="container">
            <img src="http://www.prepolino.ch/sprache/trennen/bilder/test.gif">
        </div>
    </body>
</html>

和CSS：

body
{
}
#container {
    padding: 10px;
    max-width: 200px;
    overflow: hidden;
    background: red;
}
img {
    width: 100%
}

图像忽略父节点上的最大宽度

3 个答案: