当 background-size 设置为包含时，图像显示得更小并且不被拉伸答案

【问题标题】：When background-size is set to contain, image is displayed much smaller and not stretched当 background-size 设置为包含时，图像显示得更小并且不被拉伸
【发布时间】：2015-08-06 16:37:55
【问题描述】：

当使用background-size: 100%; 时，我得到了我想要的行为，但我不明白为什么当我尝试background-size: contain; 时，我的 Chrome 浏览器显示的图像隐藏在角落里，只有浏览器窗口宽度的 20% . Firefox 也是如此。

www.moonwards.com

body {
background: url(http://www.moonwards.com/img/tycho.png);
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
}

为什么会这样？ CanIuse 说这些浏览器不应该有这个问题。

【问题讨论】：

有问题的图像是否与显示的容器元素的大小完全相同？ contain 值旨在保持图像的纵横比，因此如果大小不同，您将看到“信箱”效果。请记住，文档正文上的“高度”属性是一个非常粗略的东西。
你的body只和内容一样高，160px左右。
@UlrichSchwarz 哦，我以为它响应了窗口大小。好吧，我只是想了解一下。

标签： html css background-size

【解决方案1】：

不要使用background: url(http://link);，试试这个，

    body {
        margin: 0 auto;
        background-image: url(http:link);
    }

这对我有用。但是，我也下载了图像并将其放在与我的网站相同的文件夹中。我还发现自己经常使用 Photoshop 来调整图像大小和控制质量。

【讨论】：