1.使用伪元素
.square {
width: 200px;
position: relative;
}
.square::before {
content: "";
display: block;
padding-bottom: 100%;
}
2.使用js来计算元素的宽度,并将宽度值应用到高度上。
const square = document.querySelector('.square');
const width = square.offsetWidth;
square.style.height = width + 'px';