当我将div的图像中的background-size属性设置为background-size: cover;
或background-size: 100%;
时,两者看起来都是一样的。
有什么区别? 什么时候我应该使用封面和100%?
答案 0 :(得分:17)
cover =将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中
基本上它会放大,直到最内侧的边缘接触到侧面,这意味着一些图像可能会被切除,而不像100%所有图像都可见。
例如,请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
答案 1 :(得分:10)
这是一个小提琴:http://jsfiddle.net/RS5kX/19/
background-size:100%;
= background-size:100% auto;
=宽度设置为100%,背景图像的高度遵循图像宽高比。
background-size:cover;
表示背景图片始终适合整个div
,您的div中不会留下任何空白点
background-size:100% 100%
也不会留下任何空白区域,但当然这会破坏原始图像宽高比
答案 2 :(得分:3)
非常确定背景大小:封面;表示图像将填充元素,同时保持其纵横比,而背景大小:100%;只会使图像填充元素的100%宽度。