Css 响应：调整窗口大小时按比例调整元素的宽度和高度

我只是想让我的响应div示例像这里一样工作

其效果应该是，如果调整窗口大小，div将根据比率（在我的示例中为41,66%）更改宽度和高度

如果您从一开始就在一个小窗口中查看我的代码，效果会非常好。但是，如果将窗口从大调整到小，它将不起作用

有人能帮我找出哪里出了问题吗？高度的比例不会改变

正在更改的div位于容器内：

<ul class="slide">
    <li>
        <div class="wrapper">
            Slides
        </div>
    </li>
</ul>

幻灯片

---

我知道Chrome很好用，但我用的是最新版本的Firefox。

我用你的小提琴玩了一会儿。首先，我删除了影响包装纸高度的所有值，并在中间对齐文本，在顶部和底部添加了20.83%的填充。

*{
    margin:0;
    padding:0;  
}
ul.slide{
    list-style-type:none;
    max-width:100%;
    background:blue;    
}
    ul.slide .wrapper{
        width:1200px;
        height:0;
        margin:0 auto;
        background-color:red;
        background-image:url('img/slideshow/state1.png');
        background-repeat:no-repeat;
        background-size:cover;
        -moz-background-size:cover;
        background-position: center;
    }
    @media only screen and (max-width:1199px){
        ul.slide .wrapper{
            width:100%;
            height:0;
            border: 0;
            line-height: 0;
            padding: 20.83% 0;  /* 500px/1200px */
        }
    }

为了了解包装器的比率是如何变化的，我更改了您的JavaScript

$(document).ready(function(){
 var myVar = setInterval(function(){
  $('p').html($('ul.slide .wrapper').outerHeight() / $('ul.slide .wrapper').outerWidth() +' ratio');
 },1000);

});

看看这个，看看我改变了什么

---

我不确定这是否是你想要的，但如果你现在调整大小，比率几乎没有改变。我发现，在重新调整大小后，我必须再次在Firefox中单击“运行”才能获得正确的视图。

谢谢Micha，这非常有效！只有一件事我不明白。在我的真实示例中，我有一个容器，它以450px的高度包装ul.slide。ul幻灯片的位置为：绝对位置；高度为500px（以便与容器重叠）。如果高度小于50px的容器也能按比例调整大小，那就太好了。但在我的测试中，它会失败。你能帮我吗？它还不起作用，但在这个例子中结构已经存在了：你应该删除固定高度并添加一个相对的填充。与ul.slide几乎相同，请尝试最佳值。据我所知，只有使用垂直填充才能达到灵活的高度。嗨，Micha，很抱歉回复太晚。因此，我想出了一个问题的例子。我照你说的做了，我也做了同样的容器。这是小提琴：。如果将窗口调整为最大1199px，将出现的黄色框应与90px（540px ul.slide li包装-450px容器）的黑色框重叠。你看，有些奇怪的事情发生了。。。我不知道如何修复它。你能帮我吗？我非常感谢你嘿，米卡，你能帮我吗？