background-size: cover；和background-size: 100%；有什么区别？

Question

当我将div图像的background-size属性设置为background-size: cover;或background-size: 100%;时，两者看起来是一样的。

有什么关系？我应该在什么时候使用封面，什么时候使用100%？

Answer 1

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

基本上，它会放大，直到最里面的边缘接触到侧面，这意味着一些图像可能会被截断，而不像100%那样所有图像都将是可见的。

如果它没有进行放大，你最终会得到到达边缘的两个边，但在另一个轴上，你会在图像的任何一个方向上有空白的水平(或垂直)外观的“条”。

Your looks ：为什么它们看起来一样？

回答：如果镜像/容器是方形的

有关示例，请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Answer 2

这里有一个小把戏：http://jsfiddle.net/RS5kX/19/

background-size:100%; = background-size:100% auto; =宽度设置为100%大，背景图像的高度遵循图像的纵横比。

background-size:cover;意味着背景图像将始终适合整个div，你不会在你的div中留下任何空白点

background-size:100% 100%

也不会留下任何空白，但这当然会降低原始图像的纵横比

Answer 3

非常确定的是，background-size: cover；意味着图像将填充元素，同时保持元素的纵横比，而background-size: 100%；将使图像填充元素的100%宽度。