CSS宽度等于高度，反之亦然

Question

对于我的web项目来说很重要，我的div的宽度等于高度，反之亦然，因为高度是相对的，并设置为80%。类似于：

.key{
position: relative;
display: inline-block;
height: 80%;
width: *height*;
border: none;
cursor: pointer;
}

谢谢你的帮助。

Answer 1

有一种方法可以使用CSS！

如果根据父容器设置宽度，则可以将高度设置为0，并将填充底部设置为将根据当前宽度计算的百分比：

.key {
position: relative;
display: inline-block;
border: none;
cursor: pointer;
padding-bottom: 20%;
}