css - 响应 : Resize width and height of element in ratio while resizing window

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

我用你的 fiddle 玩了一下。起初我删除了所有影响包装器高度的值并使文本居中，我在顶部和底部添加了 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);

});

看看这个fiddle看看我改变了什么。

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