css - 使用窗口缩放 img，最大宽度

Question

我有一个 64px，我想用浏览器窗口缩放 我已经添加了 max-width 100% 但图像保持不变。

HTML

<img src="../images/GitHub-Mark-64px.png">

CSS

img{
    max-width: 100%;
    height: auto;
}

Answer 1

如果您的图像小于包含的 DIV，则您的 CSS 规则不会使其变大。尝试使用 width 而不是 max-width:

img{
    width: 100%;
    height: auto;
}

OP评论后的添加/编辑:

您可以在此规则中使用任何百分比值，例如 60%(或您喜欢的任何值)，但使用 width，而不是 max-width(这只是一个最大限制，而不是实际大小定义)。

但请注意:如果原始图像比显示的小并且被“放大”，它看起来就不太好。