【CSS】使用 CSS 实现一个宽高自适应的正方形

news2024/11/27 18:39:21

1. 利用 padding 或 vw

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        .square {
            width: 25vw;
            padding-top: 25vw;
            /* height: 25vw; 也可以*/
            background: pink;
            /* 避免被内容撑开多余的高度 */
            height: 0;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

vw单位设置了正⽅形的宽度为屏幕宽度的 1/4（25%），同时利⽤
padding-top （当然 padding-bottom 也可以）撑开盒子，使正⽅形的⾼度也为屏幕宽度的 1/4。或者直接设为父级的百分比宽度也可以。

注：vmin 是相对当前视⼝宽⾼中较小的⼀个的百分⽐单位，同理 vmax 是相对当前视⼝宽⾼中较大的⼀个的百分⽐单位。

2. 利用伪元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        .square {
            width: 30%;
            background: pink;
        }
        .square::before {
            content: '';
            display: block;
            padding-top: 100%;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

若使⽤垂直⽅向上的 padding 撑开⽗元素，则不需要触发 BFC。

.square {
    width: 30%;
    overflow: hidden;
    background: pink;
}
.square::before {
    content: '';
    display: block;
    margin-top: 100%;
}

由于容器与伪元素在垂直⽅向发⽣了外边距折叠，所以我们想象中的撑开⽗元素⾼度并没有出现。⽽应对的⽅法是在⽗元素上触发 BFC。

2.1 如果有内容的话

当元素内部添加内容时⾼度出现溢出，可以将内容放到独⽴的内容块中，利⽤绝对定位消除空间占⽤。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        .square {
            width: 30%;
            background: pink;
            position: relative;
        }

        .square::before {
            content: '';
            display: block;
            padding-top: 100%;

        }

        .square .container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="square">
        <div class="container">内容</div>
    </div>
</body>

</html>