Css怎么实现一个 高度随宽度变化 1:1 或者别的比例的布局

简介


一个网站的logo它的宽度是不固定的,并且要求它的高度与它的宽度相等也就是正方向,用css实现。
在以前的一篇文章中有记录深入理解 css 系列 css 中 padding,可以通过padding的百分比是规定基于父元素的宽度的百分比的内边距。
也可以通过vh、vw实现

实现

通过 padding 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.header {
wdith: 100px;
}
.header-logo {
padding: 50%;
background-color: #000;
}
</style>
<header class="header">
<div class="hedaer-logo">
<div>
</header>

这样就可以创建一个宽高1:1的正方形,只需要修改header元素的宽度就可以动态修改logo元素的大小。

通过 vh、vw 实现

1
2
3
4
5
6
7
8
9
10
11
<style>
.header-logo {
width: 10vh; // 或者vw
height: 10vh; // 或者vw
background-color: #000;
}
</style>
<header class="header">
<div class="hedaer-logo">
<div>
</header>

logo元素的宽高通过设置为vh、vw来实现他们的的宽度和高度值都来自与屏幕的宽或高

通过 rem 实现

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="en" font-size="12px">
<style>
.header-logo {
width: 10rem;
height: 10rem;
background-color: #000;
}
</style>
<header class="header">
<div class="hedaer-logo">
<div>
</header>

通过设置html元素上的font-size: 12pxlogo元素的宽高通过 rem 控制为10rem也可以实现宽高1:1的元素。

通过 js 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
/* header {
width: 100px;
} */
.header-logo {
width: 20%;
background-color: #000;
}
</style>
<header class="header">
<div class="header-logo"></div>
</header>
<script>
var dom = document.querySelector('.header-logo'),
nDomWidth = dom.clientWidth;
dom.style.height = nDomWidth + 'px';

window.onresize = function () {
let nDomWidth = dom.clientWidth;
dom.style.height = nDomWidth + 'px';
};
</script>

只设置logo元素的宽度,默认通过 js 获取logo元素的宽度赋值给高度,后面监听窗口变化适时更新高度。

总结

上面一共通过四种方法来实现的宽高 1:1,并且高度跟随宽度变化。其实上面四种解决方法比较相近,如果有更好的方法请留言探讨,谢谢。

参考

深入理解 css 系列 css 中 padding