宽度等于动态高度平方 [英] width equal to dynamic height square

问题描述

使用css或js设置元素的宽度，以便在高度为父div的％时匹配高度。如果浏览器窗口大小调整，小孩div也需要改变大小。

示例

  body，html {height：100％} 
 .parent {height：100％; width：960px;} 
 .child {
 height：50％; 
 width：same height; / *但不是960px的50％，所以子div是平方* / 
} 
  

我试图实现这样的东西，但宽度而不是高度。
高度等于动态宽度（CSS流体布局）

提前感谢： - ）

解决方案

正在使用jQuery，您可以在 resize（）函数中设置 width = height 或反之亦然。 p>

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

  $（window）.resize（function（）{
 $ （'#main'）。height（$（'＃main'）。width（））; 
}）; 
  

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

  #main {
 position：absolute; 
 bottom：0; 
顶部：0; 
 border：＃000 thin solid; 
背景：#DDEEFF; 
 width：100％; 
} 
  

Is it possible with either css or js to set the width of an element to match it's height when the height is a % of the parent div. The child div also needs to change size if browser window is resized.

Example

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*/
}

I'm trying to achieve something like this but width rather than height. Height equal to dynamic width (CSS fluid layout)

Thanks in advance :-)

解决方案

If you are using jQuery, you can set the width = height or vice-versa in the resize() function.

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%;
}

这篇关于宽度等于动态高度平方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！