使用 jquery 和 css 在 html 中平方容器

Square containers in html using jquery and css

本文关键字：方容器 html jquery css 使用      更新时间：2023-09-26

我想在分配给特定容器时创建一个名为square的类，其宽度应等于其高度。布局应该是响应式的。

我目前的实现：

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

这个错误的代码采用第一个元素的宽度，并为所有方形类分配相同的高度。

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

你可以使用 .height（function）

在函数中，this 引用集合中的当前元素。

法典 

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

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

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

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

这里的例子：http://jsfiddle.net/kexxv1jh/

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

相关文章：