如何適度降低100％的圖像上使用JavaScript DIV關閉

前一個問題，我問有關創建其中大小由視口的高度×寬度計算的回答非常好這裏DIV：Square DIV where height is equal to viewport 如何適度降低100％的圖像上使用JavaScript DIV關閉

我有一個背景圖像適用於#square DIV，適合JavaScript並打開時精美調整大小。然而，當JavaScript關閉時，背景圖片延伸到視口的100％的寬度 - 我推測是因爲#square div沒有被提供任何關於它應該是多寬的信息，並且默認爲100％。

所以我的問題是：我可以使用什麼方法，這樣不會發生？如果JavaScript處於關閉狀態，我可以爲我的#square DIV提供一個默認寬度，但當JavaScript處於開啓狀態時會覆蓋哪個寬度？

這裏是JQuery的（感謝對前一個問題的答案）：

$(document).ready(function(){ 
    var height = $(window).height(); 
    $('#square').css('height', height); 
    $('#square').css('width', (height*1.1)); 
});

這裏是CSS：

html, body, img { 
    height: 100%; 
    margin: 0; 
    border: 0; 
    padding: 0; 
} 

#container { 
    width: 100%; 
    height: 100%; 
    min-width: 500px; 
    min-height: 500px; 
    background-color: #e0aa0e; 
} 

#square { 
    min-width: 500px; 
    min-height: 500px; 
    overflow: hidden; 
    background-image:url('images/bg.png'); 
    background-repeat: no-repeat; 
    background-size:cover; 
}

這裏是HTML：

<div id="container"> 
    <div id="square"> 
     Content within square 
    </div> 
</div>

我想要做的是創建一個液體，可調整大小的頁面，信息元素安排在不同區域的背景和＃square的圖像 - 所以我基於#square的大小來確定所有元素的大小。其中，自從#square從JQuery調整大小後，就無法使用JavaScript了。對於沒有JQuery視圖是靜態的而不是流動的，我很高興。預先感謝所有建議。

來源

2011-07-20 Ila

你可以把一個CSS類的#square DIV其具有絕對width和height集，然後在你的jQuery腳本，使用removeClass()上#square移除CSS類。因此，如果沒有可用的jQuery，那就是設置寬度和高度，然後如果啓用jQuery，它就變成液體。

#square { 
    min-width: 500px; 
    min-height: 500px; 
    overflow: hidden; 
    background-image:url('images/bg.png'); 
    background-repeat: no-repeat; 
    background-size:cover; 
} 

#square.nojavascript { 
    width: 960px; 
    height: 960px; 
}

<div id="square" class="nojavascript">

$('#square').removeClass('nojavascript');

來源

2011-07-20 16:13:29 Amber

好極了！謝謝！ – Ila

我應該補充說，這個工作是直接出來的 - 奇妙的幫助！ – Ila

如何適度降低100％的圖像上使用JavaScript DIV關閉

回答

相關問題