2020-04-26  点击量: 169

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

 

 

评论已关闭!