img上的最大宽度可防止图像缩小

Question

当我为图像添加最大宽度时，它可以正确地防止图像变得比指定大小更宽，但是，当浏览器窗口小于最大宽度时，它还可以防止图像缩小。如果我使用与div相同的样式，div会变得更窄。 （在这个例子中，我使用内联css来简化。）

<div style="max-width: 400px;background: red;">Div Test</div>
<img alt="" src="myimage.jpg" style="max-width: 400px;">

在上面的代码中，div和img（正确）永远不会超过400px。但是，当我缩小浏览器窗口时，img仍然是400px而div则变窄了。

Answer 1

如果您为图片指定margin的百分比，它就会像您期望的那样工作。

img {
    max-width: 400px;
    width: 100%;
}

Demo

Answer 2

你需要给div一个明确的宽度（例如'100％'），否则它将使用图像的实际宽度（隐式'width：auto'）作为参考，可能超过'100％'：

<img alt="" src="myimage.jpg" style="max-width: 400px; width: 100%;">

Answer 3

如果容器是设定宽度，则无需将图像的max-width:设置为设定的像素数，只需将img设置为max-width：100％