使用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

       http://www.topcss.org/老法新用使用padding-toppercentage实现响应式背景图片/
       https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/comment-page-1/#comment-419983

      https://codepen.io/denghuijie/pen/BadBgGY