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

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>Documenttitle>
    <style>
        .square {
            width: 25vw;
            padding-top: 25vw;
            /* height: 25vw; 也可以*/
            background: pink;
            /* 避免被内容撑开多余的高度 */
            height: 0;
        }
    style>
head>

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

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>Documenttitle>
    <style>
        .square {
            width: 30%;
            background: pink;
        }
        .square::before {
            content: '';
            display: block;
            padding-top: 100%;
        }
    style>
head>

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

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

.square {
    width: 30%;
    overflow: hidden;
    background: pink;
}
.square::before {
    content: '';
    display: block;
    margin-top: 100%;
}
1
2
3
4
5
6
7
8
9
10

由于容器与伪元素在垂直⽅向发⽣了外边距折叠，所以我们想象中的撑开⽗元素⾼度并没有出现。⽽应对的⽅法是在⽗元素上触发 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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述
但如果是 margin-top，则：

在这里插入图片描述
换成 margin 和 scroll：

相关阅读:
浅谈JSON数据
这份 Github 下载量高达 76.9W 次的《Java 系列面试宝典》，足以吊打各个大厂面试官
2023App测试必掌握的核心测试：UI、功能测试
leetcode-233：数字 1 的个数
Oracle RAC是啥？
黑马头条知识点总结
Linux-c inotify监控目录和文件使用
图像分割-改进网络结构
Docker | 将本地项目发布到阿里云的实现流程
【软考-中级】系统集成项目管理工程师-合同管理历年案例

原文地址：https://blog.csdn.net/XiugongHao/article/details/133978701