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

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 简书 掘金

文章分类
前端
文章标签