用窗口缩放img，最大宽度

Question

我有一个64px，我想用浏览器窗口缩放我添加了最大宽度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（这只是最大值）限制，但不是实际的大小定义。）

但是请注意：如果原始图像小于显示的图像并且被炸毁，那么它真的看起来不太好。

Answer 2

尝试在CSS中使用UnsafeMutablePointer<CFRange>!代替CFStringTransform(theCFMutableString, nil, kCFStringTransformToUnicodeName, false) ，width属性实际上设置了img的宽度。但是，将其设置为100％实际上会覆盖整个空间，因此您可能会相应地使用较小的百分比。

Answer 3

阅读：CSS Image size, how to fill, not stretch?

如果您想将图像用作CSS背景，那么就有一个优雅的解决方案。只需在后台大小的CSS3属性中使用cover或contains。

width: 100%;
height: 100%
background-size: cover;