正方形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的寬度基於百分比高度

回答

相關問題