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);

});

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

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

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

1 个答案: