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

最新推荐文章于 2023-10-31 18:30:00 发布

劲枫

最新推荐文章于 2023-10-31 18:30:00 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签：容器按比例缩放 VUE中echarts自适应

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/80838903

版权

前端专栏收录该内容

60 篇文章 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%
        <!--233/414=9/16=56.25%-->
    </div>
</div>

<div class="wrap2">
    <div class="box2">
        281/375=3/4=75%
        <!--311/414=3/4=75%-->
    </div>
</div>
</body>
</html>

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

劲枫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【移动端元素按比例缩放】用Padding-buttom撑开高度

1、在说容器按比例缩放前，我们先说下图片按比例缩放。对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放。图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频、div元素等元素则没有这个属性。一般在响应式中，我们会要求视频、或者一些图表、一些块元素的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候...
复制链接

扫一扫