CSS：流体盒调整尺寸同时保持纵横比（带填充顶部）

Question

我试图调整一个我知道宽高比（x：y为1：0.6）的图像占位符（以下简称框）。到目前为止，我能够使其中的大部分工作（我用相对于宽度技巧的填充顶部解决了它）。唯一的问题是，容器似乎忽略了最大宽度和最大高度，因此变得比盒子内部大。有没有办法将填充顶部的大小相对于最大宽度或最大高度限制？或者我怎样才能阻止它在垂直方向上生长太多？

这是我迄今为止所尝试过的：

HTML

<div class="body">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.body {
    height: 100%;
    width: 100%:
}

.container {
    background-color: #aaa;
    position: relative;
    width: 100%;
    max-width: 700px;
    padding-top: 60%;
    height: 0;
    max-height: 420px;
}

.box {
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 420px;
}

的jsfiddle： http://jsfiddle.net/pg92gc7o/2/