跳到主要内容

宽高固定比

2023年07月13日
柏拉文
越努力，越幸运

一、padding 百分比​

子元素的 padding 百分比是由包含块的 width 属性的值来计算。但是 padding 撑起了高度之后, 是无法盛放内容的，这时候我们可以通过再加一个绝对定位的孙级元素来盛放内容，通过 top: 0、bottom: 0 将高度撑开，与父元素相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高固定比</title>
    <style>
        .box{
            width: 40%;
        }
        .box-inner{
            width: 100%;
            padding: 50%;
            position:relative;
            background-color:aqua;
        }
        .content{
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-inner">
            <div class="content">
                哈哈
            </div>
        </div>
    </div>
</body>
</html>

二、aspect-ratio​

aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高固定比</title>
    <style>
        .box{
            width: 40%;
            aspect-ratio: 2/1;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>