手记

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

1人推荐
随时随地看视频
慕课网APP