html - 当 background-size 设置为 contains 时，图像显示得更小且不被拉伸

Question

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

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

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

score 0 · Accepted Answer

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

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

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

1 回答 1