Question

当高度为父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*/
}

我正在努力实现这样的事情但是宽度而不是高度。 Height equal to dynamic width (CSS fluid layout)

提前致谢： - ）

Answer 1

如果您使用的是jQuery，则可以在width = height函数中设置resize()或反之亦然。

http://jsfiddle.net/Ev6Vj/173/

$(window).resize(function() {
  $('#main').height($('#main').width());
});

<div id="main">
    <img src="http://placehold.it/200x200" />
</div>

#main {
    position: absolute;
    bottom: 0;
    top: 0;
    border: #000 thin solid;
    background: #DDEEFF;
    width: 100%;
}

Answer 2

$(document).ready(function()
{
    $(window).resize(function()
    {
        $("div").height($("div").width());
    });
    $(window).resize();
});

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

Answer 3

使用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);

see fiddle

宽度等于动态高度方块

3 个答案: