CSS3 background-size:cover/contain

background-size的cover和contain指定背景图片的自适应方式,只能对整张图片进行缩放。

cover是拉伸图片使之充满元素,元素肯定是被铺满的,但是图片有可能显示不全。

contain则是拉伸图片使图片完全显示在元素内,图片肯定能显示全,但是元素可能不会被铺满。

以上“可能”的情况,发生在元素尺寸和图片尺寸宽高比例不一致的时候。

当元素与背景图片的大小一样,或者是宽高比例一致时,contain和cover的填充效果是一样的,因为两者在拉伸后总能使图片“恰好”完全充满元素。

background-size可以取具体的值以及百分比。

 

posted @ 2016-09-25 14:37  大vicki  阅读(193)  评论(0编辑  收藏  举报