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.png

• contain 会留空白

  
  
  image.png