Question

我正在尝试做这个小提琴的反转，制作一个宽度基于100％高度的正方形。

<html  style="height:100%">
<body style="height:100%">
<div id="square" style="background-color:black"></div>
</body>
</html>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.width();

square.css('height',size);
}

非常感谢你的帮助。

的Seb。

Answer 1

在CSS中设置div的高度

<style>

html,body,#square { height:100%; }

</style>

然后你的js函数反向

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

演示由wared提供 - jsfiddle.net/wared/spSLP - - 不错的一个，誓言

Answer 2

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
    var square = $('#square');
    var size = square.height();

    square.css('width',size);
}

注意 - 这需要方形div首先有一个高度 - 高度与宽度的行为不同 - 只是抬头！

Answer 3

在变量中使用简单的数学方程，您可以设置一个自动重新调整大小的方形div。在*之后改变100，为你的div提供％宽度。请参阅工作jsfiddle了解响应宽度

$(document).ready(function() { 

  var height =  ( $(window).height() / 100) * 100 ;
  $('#square').width(height);
  $('#square').height(height); 

    });

$(window).resize(function(){

 var height =  ( $(window).height() / 100) * 100 ;
 $('#square').width(height);
 $('#square').height(height); 

    });

方形div，宽度基于百分比高度

3 个答案: