使用padding代替高度实现背景图片、图片等比例自适应

一、背景图片

使用padding代替高度的原因可查阅参考1链接

固定宽高比

        .boxWrapper{
            max-width: 320px;
        }

          .box {

            width: 100%;

            height: 0;

            padding-bottom: 84.375%; /*图片宽高 320/270  270/375=84.375%*/

            background: url(/part/home2013/451/U179P4T451D5F17247DT20211216075602.jpg) no-repeat;

            background-size: cover;/*或 100% 100%*/

            background-position: center; /* 因background-size不兼容，所以设置此属性 居中显式 Internet Explorer 7/8 */

        }

流动宽高比

见参考2链接

二、图片

 见参考3链接

参考：

       https://bbs.huaweicloud.com/blogs/detail/181211