CSS布局高度始终为宽度的一半

最近在准备面试，刷了一些大厂的真题，经常出现关于布局的一个高频问题，“使用css实现如何让div高度始终为宽度的一半？”

下面看看有哪几种实现方式，其每种方法优缺点如何：

第一种：vw单位

html代码

<div class="container">vw</div>

style样式

.container {
    width: 100vw;
    height: 50vw;
    background: green;
}

效果图

高为宽一半1.png

优缺点：优点是只需要vw单位就可以实现，缺点是vw单位会包含滚动条宽度

第二种：vw+var+calc

html代码

<div class="box">var + calc + vw</div>

style样式

:root {
    --wwidth: 100vw;
    --hheight: calc(var(--wwidth) / 2);
}
.box {
    width: var(--wwidth);
    height: var(--hheight);
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
    font-size: 30px;
}

效果图

高为宽一半2.png

优缺点：缺点也是vw单位会包含滚动条宽度，优点是自定义单位可以随意定如何宽度

第三种：padding

html代码

<div class="outer">
    <div class="inner">padding</div>
</div>

style样式

.outer {
    width: 100%;
    /*padding-bottom: 50%;*/
    padding: 25% 0;
    position: relative;
}
.inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    background: skyblue;
}

效果图

高为宽一半3.png

优缺点：优点是宽度100%不包含滚动条，缺点是需要两个html标签才能实现

本文是笔者总结编撰，如有偏颇，欢迎留言指正，若您觉得本文对你有用，不妨点个赞~

关于作者：

GitHub 简书掘金