CSS设置背景图宽度100%,高度自适应

div的高度随背景图片的高度变化:
原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比。高度设置为0.

 

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

/*以上为第一种 */

.newcenter{
    width: 100%;
    background: url('../../assets/img/newcenter.png') no-repeat;
    background-size: 100% auto; 
}

.newcenter:before{
    content: ""; 
    display: block; 
    padding-top: 100%;
}

/*以上为第二种;不过需要先确定背景图的长宽比,然后padding-top的值就位百分比的值*/

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

你可能感兴趣的:(web前端)