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

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

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

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

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

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

05-06 15:17