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

【问题标题】：What is the difference between background-size: cover; and background-size: 100%;?background-size:cover 和有什么区别？和背景大小：100%；？
【发布时间】：2014-07-09 13:27:14
【问题描述】：

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

有什么区别？什么时候应该使用掩护，什么时候使用 100%？

【问题讨论】：

在页面上尝试不同的宽度/高度，尝试使区域大于图像和小于图像，您应该可以看到差异

标签： css background-size

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

这是一个小提琴：http://jsfiddle.net/RS5kX/19/

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

background-size:cover; 表示背景图像将始终适合整个 div ，您的 div 中不会留下任何空白点

background-size:100% 100%

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

【讨论】：

那么100%和100% auto有什么区别？
没有区别 - 100% 就像说 100% 自动，它只是一个捷径

【解决方案3】：

相当确定背景尺寸：封面；表示图像将填充元素，同时保持其纵横比，而 background-size: 100%;只会使图像填充元素的 100% 宽度。

【讨论】：