背景大小属性中，background-size: cover; 和 background-size: 100%; 有何不同？

Question

当我将一个div的背景图片的background-size属性设置为background-size: cover;或background-size: 100%;时，两者看起来相同。

有什么区别？何时应使用cover和100%？

- Andreas Furster

---

尝试在页面上使用不同的宽度/高度，尝试使区域比图像更大或更小，您应该能够看到差异。 - Huangism

Answer 1

cover = 将背景图像缩放到最大，以使背景区域完全被背景图像覆盖。在背景定位区域内，一些背景图像的部分可能不可见。

基本上，它会缩放直到最内侧的边缘与边缘接触，这意味着与100%的情况不同，其中一些图像可能会被裁剪。

如果不进行“缩放”，则会出现两个达到边缘的侧面，但在另一个轴上，您会在其中一个方向的图像两侧看到空白的水平（或垂直）“条纹”。

您的问题: 为什么它们看起来一样？
答案: 如果图像/容器是正方形的

请参见http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover示例。

- Michael Durrant

Answer 2

这里有一个小技巧：http://jsfiddle.net/RS5kX/19/

background-size:100%; 等同于 background-size:100% auto;，即将背景图片的宽度设置为100%，高度按照图片比例自适应。

background-size:cover; 的意思是让背景图片始终充满整个 div 区域，不会留下任何空白区域。

background-size:100% 100%

不会留下任何空白的位置，但是这样做会破坏原始图像的宽高比。

- valerio0999

---

那么 100% 和 100% auto 有什么区别呢？ - Andreas Furster

没有区别 - 100% 就像说 100% 自动化，这只是一个快捷方式。 - valerio0999

Answer 3

很确定 background-size: cover; 表示图像将填充元素，同时保持其宽高比，而 background-size: 100%; 仅会使图像填充元素的100%宽度。

- Alsh