CSS设置背景图宽度100%，高度等比例缩放

在前端开发中经常遇到背景图宽100%，高度等比例缩放的要求。如何CSS设置背景图宽度100%，高度等比例缩放？

在前端开发中经常遇到背景图宽100%，高度等比例缩放的要求。

1、js 通过计算屏幕宽度根据图片的宽高度比例来计算高度来调整div等标签的尺寸。

2、使用rem作为单位，提前根据款高比在css写死宽高度。

3、CSS设置背景图宽度100%，高度等比例缩放。

本文主要讲解CSS设置背景图宽度100%，高度等比例缩放的方法。

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

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

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