css - background-size:cover 和有什么区别？和背景大小：100%；？

Question

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

有什么不同？我什么时候应该使用掩护，什么时候使用 100%？

Answer 1

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

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

如果它没有进行放大，您最终会得到两条到达边缘的边，但在另一个轴上，您将在其中一个方向的图像两侧看到空白的水平（或垂直）“条形”。

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

参见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: 100%; 只会使图像填充元素的 100% 宽度。