Css 元素高度/宽度缩放问题

我的背景元素有问题。我有两个div，左窗帘和右窗帘，需要是浏览器高度的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%的宽度，然后在底部留下一个令人尴尬的间距

有什么建议吗

编辑：删除了jquery解决方案

我理解你错了，因此发布了这样的帖子，如果你尝试为该元素以及所有父元素提供100%的高度和最大高度会更好。比如说

HTML:

---

请尝试一下这个概念。

请在上面设置一个示例，其中也包含您的web标记好的，完成：我只是尝试将窗帘div的背景图像缩放到页面高度的100%，并将宽度比例适当调整到背景图像的缩放宽度。在一些显示器上，这意味着100%的高度和20%的宽度，在一些显示器上，这意味着100%的高度和40%的宽度。我不认为jquery解决方案能帮我解决这个问题，但是如果我错了，请纠正我。没有解决它。实际的元素拉伸到100%的高度-这不是问题所在。问题是，宽度一直保持在最小宽度，而不是缩放到背景图像。例如，元素高度为100%，宽度为20%，背景图像只是缩放到宽度，因此图像没有填充整个100%。我需要的是图像缩放到高度，然后再缩放到相应的宽度，而不是仅仅停留在100%并强制图像缩放到宽度。抱歉说得太冗长了。

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

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