background-size的两个属性:cover和contain

Posted hulaoxi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background-size的两个属性:cover和contain相关的知识,希望对你有一定的参考价值。

两种都不会造成图片失真,其中:

(1)cover:相当于宽度等于元素的宽度,高度设为auto;

(2)contain:相当于高度等于元素的高度,宽度设为auto;

 

例如:设置一个高度和宽度都为300px的容器,然后将一张1600px*1200px尺寸的图片设为为图片的背景,这个时候就应该想到设置下background-size

以上是关于background-size的两个属性:cover和contain的主要内容,如果未能解决你的问题,请参考以下文章

5.偶然看到的一个css加载动画

CSS background-size 属性详解

CSS3:background-size背景图片尺寸属性

background-size属性的几个实用的值

css中background-size属性

CSS:设置 background-size:cover 属性以覆盖 div 而不是整个屏幕