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%;
}

演示