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% 宽度。