html - 当 background-size 设置为包含时，图像显示得更小并且不会拉伸(stretch)

Question

当使用 background-size: 100%; 时，我得到了我想要的行为，但我不明白为什么当我尝试 background-size: contain;我的 Chrome 浏览器将图像显示在 Angular 落里，只有浏览器窗口宽度的 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说这些浏览器不应该有这个问题。

Answer 1

而不是使用 background: url(http://link); 简单地，试试这个，

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

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