Javascript 使用jquery和css的html方形容器

我想创建一个名为square的类，当指定给特定容器时，该类的宽度应等于其高度。布局应具有响应性

我目前的执行情况：

$('.square').height($('.square').width());
$( window ).on("resize",function() {
    $('.square').height($('.square').width());
});

这个错误代码取第一个元素的宽度，并将所有的正方形类指定为相同的高度

如何使用jquery和css正确地实现这一点

您可以使用

在函数中，

此

引用集合中的当前元素

代码

---

在实现Javascript解决方案之前，可以使用纯CSS实现这一点

如果为元素的padding top属性指定一个百分比值，则该值相对于其父元素的宽度。使用伪元素，我们可以创建一个额外的容器，该容器的高度始终与其父容器的宽度相同，使其成为方形

.square {
    width: 200px;
    position: relative
}
.square:after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
}

示例如下：

如果容器中不需要任何文本，可以完全删除整个内部div

.square {
    width: 200px;
    position: relative
}
.square:after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
}