响应div大小与比例

Question

我有这个设置：

<div class="wrapper">
    <div class="container"> <div class="inner"></div></div>
</div>

.wrapper {
    max-width:320px;
    max-height:240px;
}
.container {
    position:relative;
    padding-top:56.25%;
    background:green;
}
.inner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

http://jsfiddle.net/3A32T/2/

如果缩小窗口宽度，div大小会缩小，同时保持宽高比，这就是我想要的。

但是，如果缩小窗口高度，div高度不会收缩，则会进行浏览器滚动。

有没有办法实现第二个条件？

Answer 1

此处更新了DEMO。

将padding-top更改为height

写：

html,body,.wrapper{
    height:100%;
    width:100%;
}
.container {
    height:56.25%;
}