Изменение размера элемента динамически, но сохранение пропорции его фона

Question

У меня есть контейнер, в котором есть 4 элемента на каждой строке. Они пропорционально меняют размер динамически, однако у них есть фокусное изображение с несколькими сценариями (которое не вращается в этой демонстрации).

установить ширину моего контейнера к 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); 
}