Div的自動調整大小的窗口的寬度和高度

我工作的一個項目，我想創建以下文件：Div的自動調整大小的窗口的寬度和高度

我想有以下海誓山盟三個或更多的div（與內容和背景圖像）。當您打開瀏覽器時，所有這些div都必須自動調整爲瀏覽器大小（寬度和高度）。當您調整瀏覽器窗口的大小時（不刷新），div必須與它們一樣大（因此它們不應該隨窗口調整大小）。在縮小瀏覽器屏幕並刷新之後，div應調整爲新的窗口大小。（應該有1024的最小寬度，所以div不能小於那個）

在div裏面我想添加背景圖片。（相片）。我的目標是將照片的大小調整爲div尺寸。因此，高度必須與照片/格的寬度一起縮放。

例如：如果瀏覽器窗口是1024x768，div和照片必須是1024x768。當我調整瀏覽器的大小時，div保持爲1024x768。當您將瀏覽器重新調整爲1280x720並進行刷新時，div應自動調整爲該大小。 div的高度應始終與寬度成比例。

有誰知道如何做到這一點？我無法在其他地方找到它。

來源

2012-06-17 Hans de Vries

http://jsfiddle.net/MQkmk/1/

$(function(){    // when the page is loaded ... 
    var $f = $('#fixy'); // .. make current size permanent. 
    $f.css({ 
     width: $f.width(), 
     height: $f.height() 
    }); 
});

來源

2012-06-17 18:08:37 biziclop

巴，太簡單了。只花了3個月的時間來破解。下次嘗試ROT26！我聽說雙重加密使其安全兩倍。 – BoltClock

<html><head> 
<script src="js.js"></script> 
<title></title> 
<style> 
#box { 
     background: url("DSC_2598.jpg"); 
background-size:contain; 
     position: absolute; 
    } 
</style> 
</head> 

<body> 
<div id="box"></div> 

<script> 
     $(document).ready(function(){ 
    var x=$(window).width(); 
     var y=$(window).height(); 

    if (x>1024) {var a=x/2;} else {var a=1024}; 
    if (y>768) {var b=y/2;} else {var b=768}; 
     $("#ww").html("width="+x +"<br>"); 
    $("#wh").text("height="+y); 
     $("#box").css("height",b); 
     $("#box").css("width",a); }); 

</script> 
</head> 
<body> 
<br> 
</body> 
</html>

這可能滿足您的需求，只要您有適合的比例（1024×768）的圖像。

來源

2013-11-12 11:58:43

Div的自動調整大小的窗口的寬度和高度

回答

相關問題