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

Question

我只是想让我的响应式div 示例像这里一样工作 http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

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

如果您在一个小窗口中从头开始查看我的代码，效果将完美运行。但是，如果将窗口大小从大调整为小，它将不起作用。

请有人帮我找出出了什么问题吗？高度不会按比例变化。

更改的div 位于容器内：

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

http://jsfiddle.net/Mg9ZB/

我知道在Chrome中它运行良好，但我使用的是最新版本的Firefox。

Answer 1

我玩了一下你的小提琴。起初，我删除了所有影响包装器高度的值，为了使文本居中，我在顶部和底部添加了 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中再次单击"运行"才能在调整大小后获得正确的视图。