1、background-size
background-size：背景图片宽度 背景图片高度
- 单位
长度 百分比 cover contain
div{
background: url('../../assets/liv.jfif') no-repeat;
/* 单位 长度|百分比|cover|contain */
/* background-size: 图片的宽度 图片的高度; */
/* 1、宽300px 高200px 会按照这个像素拉伸 */
background-size: 300px 200px;
/* 2、只有一个参数 那就是表示宽度的意思
图的高度会根据图宽高比例计算，图不会拉伸*/
background-size: 800px;
/* 3、可以是30% 这样的参数 表示父组件的百分之几 */
background-size: 50% 20%;
/* 4、宽度是父组件的80% 高度自动计算 图片不回拉伸 */
background-size: 80%;
/* 5、要完全覆盖div盒子 可能有部分背景图片显示不全 */
background-size: cover;
/* 6、contain 高度和宽度等比例拉伸 当宽度 或 高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
background-size: contain;
}
cover 图片会显示不全
image.pngcontain 会留空白
image.png
