元素高度/宽度缩放问题

我遇到了背景元素的问题。我有两个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

元素高度/宽度缩放问题

回答

相关问题