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

【问题标题】：Max-width on img prevents image from shrinkingimg 上的最大宽度可防止图像缩小
【发布时间】：2016-09-01 15:14:44
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

如果您为图像指定margin 的百分比，它将按您的预期工作。

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

【讨论】：

【解决方案2】：

你需要给div一个显式的宽度（例如ˋ100%ˋ），否则它会使用图像的实际宽度（隐式ˋwidth:autoˋ）作为参考，可能大于ˋ100%ˋ：

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

【讨论】：

【解决方案3】：

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

【讨论】：