两种实现方法:
css
padding-top padding-bottom ,主要知识点是: padding-top、padding-bottom百分比值是相对包含块的宽度来算的。
大漠老师这个答案妙啊
效果预览
body {
width: 100%;
font-size: 0;
text-align: center;
}
div {
display: inline-block;
width: 20%;
background: green;
font-size: 12px;
position: relative;
vertical-align: middle;
}
div:nth-child(2n) {
background: orange;
}
div:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
font-size: 4em;
color: #fff;
}
当然,可以把用 flex 替代 inline-block。使用 flex 又有点新的问题,我用 flex 时指定了容器的高度,然后 flex-item 的高度就自己膨胀了,,,最后我给 flex-item 一个 margin: auto解决的,也不知道这样对不对。。
其实还可以用 vw 来实现,width 和 height 都用 vw 作为单位。不过这一般适合在移动端使用。还看到有通过 calc 计算宽度来实现的 height: calc(width);,但是兼容很差?骚断腿,chrome 都无效。可能是根本不行吧。。
js 。
一行代码解决:
$(document).ready(function(){
$('#box1').css('height',$('#box1').css('width'));
})
看起来很简洁又易懂是吧,可还是 css 实现比较好。
通过 js 改变元素的 height 需要在页面渲染完成之后先获取元素的 width,再更改 height,对性能的消耗比较大。
上面是通过 jQuery 来实现的。我想用原生的 js 来实现,可遇到不少问题。
原生 js 如何获取和设置元素的样式?
someElementObject.style?然后我就发现 someElementObject.style.width 为空。
为什么为空啊?找答案时发现一条扎心的老回复。
14年前的扎心回复
其实 style 只是内联样式。
那如何获得实时的 style 呢?最后发现好像只能通过 Window.getComputedStyle()。用法:
let style = window.getComputedStyle(element, [pseudoElt]);
然后设置内联样式 height 为当前 width:
item.style.height = window.getComputedStyle(item, null).width;
就行了。
可如果你改变屏幕大小,还是会出问题。