元素高度/寬度縮放問題

我遇到了背景元素的問題。我有兩個div，curtain_left和curtain_right，它們必須是瀏覽器高度的100％，寬度不得低於20％，寬度不得超過40％。主要要求是窗簾縮放到100％的高度。元素高度/寬度縮放問題

現在，我有

#curtain_left { 
left: 0px; 
min-width: 20%; 
max-width:40% 
height: 100%; 
text-align: left; 
z-index: -1; 
position: fixed; 
background-image: url(img/curtain_right.png); 
background-size: 100%; 
background-repeat: no-repeat;

這似乎是隻注重最小寬度，並根據縮放高度不擴大。所以它適用於寬屏顯示器，但在標準情況下，背景圖像會擴大到20％的寬度，然後在底部留下一個尷尬的間距。

enter image description here

任何提示嗎？

http://jsfiddle.net/kJbcj/1/

來源

2012-06-21 chrscblls

請在http://jsfiddle.net/上設置一個示例，該示例還包含您的網絡標記 –

好的，完成：http://jsfiddle.net/kJbcj/1/ – chrscblls

編輯：除去jquery的溶液。

我明白你的錯誤，因此貼出來，如果你嘗試提供100％的高度和最大高度以及所有父元素，該元素會更好。例如

HTML：

<div class="wrapper"> 
    <div id="curtain_left"></div> 
</div>

CSS：

html, body, .wrapper, #curtain_left { 
    height: 100%; 
    max-height: 100%; 
}

請給這個概念一試。

來源

2012-06-21 12:57:54 Subhajit

我只是想讓窗簾div的背景圖像縮放到頁面高度的100％，並且適當地具有寬度比例（根據背景圖像的縮放寬度）。在一些監視器上，這意味着100％的高度和20％的寬度，有些則意味着100％的高度和40％的寬度。我不認爲jQuery解決方案可以幫助我，但如果我錯了，請糾正我。 – chrscblls

沒有解決它。實際的元素伸展到100％的高度 - 這不是問題。問題是寬度是堅持最小寬度，而不是縮放到背景圖像。例如，元素高度爲100％，寬度爲20％，背景圖像僅縮放爲寬度，因此圖像不會填滿整個100％。我需要的是將圖像縮放到高度，然後根據比例縮放寬度，而不是僅保持100％，並強制圖像按比例縮放。對不起，過於冗長。 – chrscblls

元素高度/寬度縮放問題

回答

相關問題