background-size的使用----图片不同的自适应情况

.box{

    width: 600px;

    height: 300px;

    border: 1px solid red;

    background-image: url("assets/images/banner.jpg");

    background-repeat: no-repeat;

    background-size: cover;  //图片会等比例伸缩铺满整个容器，图像不会变形

}

 

.box{

    width: 700px;

    height: 400px;

    border: 1px solid red;

    background-image: url("assets/images/banner.jpg");

    background-repeat: no-repeat;

    background-size: contain; //保持比例，适合容器中的最大大小

}

 

 

.box{

    width: 700px;

    height: 400px;

    border: 1px solid red;

    background-image: url("assets/images/banner.jpg");

    background-repeat: no-repeat;

    background-size: auto;  //在容器中显示自身的的宽高大小

}

 

 总结：