正方形div的宽度基于百分比高度

我正在尝试做这个小提琴的反演，根据基于100％高度的宽度制作一个正方形。正方形div的宽度基于百分比高度

<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。

来源

2014-01-05 Sebastien-Gath

工作jsfiddle如果有人能帮助我适应这个代码，以使适合100％高度的正方形。（在PX宽度必须等于％的高度） –

在CSS设置div的高度也

<style> 

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

</style>

那么您js函数的逆wared

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

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

演示礼貌 - jsfiddle.net/wared/spSLP - - 不错的一个，挥手

来源

2014-01-05 16:40:28

http://jsfiddle.net/wared/spSLP/;） – leaf

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

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

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

注 - 这需要正方形div有一个高度在第一个地方 - 高度不表现与宽度相同 - 只是抬头！

来源

2014-01-05 16:40:07

好，谢谢:) –

在变量中使用一个简单的数学公式，您可以设置一个自动重新调整大小的方形div。 *之后更改100，为您的div提供％宽度。看到响应宽度

$(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); 

    });

来源

2014-01-08 15:02:17 sinnyour

正方形div的宽度基于百分比高度

回答

相关问题