Javascript 宽度等于动态高度平方

当高度为父div的%时，css或js是否可以设置元素的宽度以匹配其高度。如果调整浏览器窗口的大小，子div也需要更改大小

示例

body, html {height: 100%}
.parent {height: 100%; width: 960px;}
.child {
    height: 50%; 
    width: same as height; /* but not 50% of 960px, so that the child div is square*/
}

我正在努力实现这样的目标，但不是高度而是宽度。

提前感谢：-）

---

您可以使用jQuery来匹配元素的高度和宽度。

如果使用jQuery，可以在

resize（）

函数中设置

width=height

，反之亦然

$（窗口）。调整大小（函数（）{
$（'main'）。高度（$（'main'）。宽度（）；
});

#主{
位置：绝对位置；
底部：0；
排名：0；
边框：#000薄实心；
背景：#DDEEFF；
宽度：100%；
}

使用jquery

function resizeChild() {
var child = $(".child");
var parentSize = child.parent().height();
child.height(parentSize / 2);
child.width(parentSize / 2);
}
$(window).ready(resizeChild);
$(window).resize(resizeChild);

---

Javascript，我的朋友。只需拖动

结果

帧，然后观察高度与宽度的匹配情况，即

100%

帧的宽度。

function resizeChild() {
var child = $(".child");
var parentSize = child.parent().height();
child.height(parentSize / 2);
child.width(parentSize / 2);
}
$(window).ready(resizeChild);
$(window).resize(resizeChild);