jquery - 动态调整元素大小，但保持其背景比例

Question

我有一个容器，每行包含 4 个元素。它们按比例动态地改变大小，但是它们有一个多 Sprite 背景图像(在这个演示中不旋转)。

我将我的容器的宽度设置为 23.75%，我应该设置多少作为我的高度以便我的背景图像的(小部分)始终成比例？

.body {
    margin: 15px;
    background: grey;
}
.container {
    background-image: url("http://i.imgur.com/MUQ1HxQ.jpg"); 
    background-size: 600% 100%;
    background-position: 0px 0px;
    margin-right: 1%;
    width: 23.75%;
    height: 15vw;
    display: inline-block;
}
.body .container:nth-child(4n+1) {
    margin-left: 1%;
} 

JsFiddle

Answer 1

Here's the solution I came up with (css+Jquery)

.body {
    margin: 15px;
    background: grey;
}
.container {
    background-image: url("http://i.imgur.com/MUQ1HxQ.jpg"); 
    background-size: 600% 100%;
    background-position: 0px 0px;
    margin-right: 1%;
    width: 23.75%;
    height: 15vw;
    display: inline-block;
}
.body .container:nth-child(4n+1) {
    margin-left: 1%;
} 

---

<div class="body">

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

</div>

---

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
    var div = $('.container');
    var width = div.width() * 0.56;

    div.css('height', width);
}