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

Question

当我将 max-width 添加到图像时，它可以正确地防止图像变得比指定的尺寸更宽，但是，当浏览器窗口小于 max-width 时，它也可以防止图像缩小。如果我对 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