【移动端元素按比例缩放】用Padding-buttom撑开高度

红太狼 2022-05-21 02:28 171阅读 0赞

1、在说容器按比例缩放前，我们先说下图片按比例缩放。

对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放。

图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频、div元素等元素则没有这个属性。

一般在响应式中，我们会要求视频、或者一些图表、一些块元素的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），元素宽度变了，那么高度也得根据我们要求的16：9或4：3改变。

2、**解决核心思想为**：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（需要自适应的元素高度除以宽度\*100%）（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的100%

3、根据这个思想，代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>Title</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            ::-webkit-scrollbar {
                width: 0px;
            }
            .wrap {
                height: 0;
                padding-bottom: 56.25%; /* 16:9 相对于宽padding*/
                position: relative;
                width: 100%;
                background-color: #7cff22;
            }
            .wrap box {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            .wrap2 {
                height: 0;
                padding-bottom: 75%; /* 16:9 设计稿的：高/宽*100%*/
                position: relative;
                width: 100%;
                background-color: #1733ff;
            }
            .wrap2 box2 {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
    
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="box">
            211/375=9/16=56.25%
            
        </div>
    </div>
    
    <div class="wrap2">
        <div class="box2">
            281/375=3/4=75%
            
        </div>
    </div>
    </body>
    </html>

![70][]

当屏幕尺寸改变是依然按照16:9的比例缩放的

![70 1][]

[70]: /images/20220521/a7819adda3244b2fbad8c55595f3eb2d.png
[70 1]: /images/20220521/c4ed365b19404a9eaa43246c95d2b86a.png