CSS背景图设置宽度100%，高度自适应的方法

两种方法

1.通过设置background-size和:before进行实现

.newcenter{
        width: 100%;
        background: url('../../assets/img/newcenter.png') no-repeat;
        background-size: 100% auto;
    }
.newcenter:before{content: ""; display: block; padding-top: 100%;}

 

2.通过设置padding-top或padding-bottom实现，值是背景图片的宽高比。高度设置为0.

   .newcenter{
        width: 100%;
        max-width:1200px;
        background: url('../../assets/img/newcenter.png') no-repeat;
        background-size: 100% auto;
        padding-top: 13%;
        height: 0px;
    }

 

当然，还有其它方法，例如利用position进行层叠实现，通过一个图片宽度自适应作为底层。

 

参考：https://www.jianshu.com/p/894dbab72f95