Question

我知道这是一个很受欢迎的问题。我已经阅读了这方面的解决方案，包括将padding-bottom设置为相等的宽度。除了将其分配给伪元素，因此更容易插入内容。（加上其他css解决方案）。 css height same as width

这些确实有效，但它给我带来了一些我插入的内容的麻烦，并且不值得麻烦（因为我的整个网站都是从这些方块构建的）。

对于javascript我是新手，但是有一个简单的解决方案可以使div高度等于宽度。（对不起，我太新手甚至没有尝试过：/）

我尽量不要问太多“为我编写代码”的问题，所以参考或解释同样会受到赞赏。

答案： 感谢雅各布只是为了添加到您的代码上，现在可以调整大小，以防其他任何人遇到同样的问题{{3} }

function updateSize(){
var box = $(".test");
box.css("height", box.width());
}

$( window ).resize(updateSize);
$(document).ready(function(){
updateSize();
})

Answer 1

这很容易做到。

要编辑使用JS设置元素的样式，可以设置style方法的所需属性。

var test = document.querySelector(".test");
test.style.height = getComputedStyle(test).width;

.test {
  background: red;
}

<div class="test">Super uber goober</div>

使用JS，我们首先选择.test的第一个外观，并将其分配给变量（var test = document.querySelector(".test");）

然后我们得到元素的计算宽度，并将其设置为高度（test.style.height = getComputedStyle(test).width;）

为了完整起见，这里也是一个jQuery解决方案：

var test = $(".test");
test.css("height", test.width());

.test {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test">Super uber goober</div>

将div高度设置为相等宽度（javascript）

1 个答案: