Отзивителни изображения с различни размери на едно и също ниво - css, zurb-foundation

Здравейте, бих искал да получа същия размер на изображениятакакто е на пример, но можете да видите, че когато променяте размера на прозореца, по-големите изображения са по-малки от колоните вляво. Аз се боря с него от дълго време и все още не намерих решение. Трябва да го имам с текста с наслагване. Така че това е друг проблем. Благодарим ви за предложения http://jsfiddle.net/sLk0jf4L/264/

<div class="row" data-equalizer>
<div class="small-3 columns col-left" data-equalizer-watch>
<div class="row">
<div class="small-12 columns">
<img src="/images/http://placehold.it/600x300" />
<img src="/images/http://placehold.it/600x300" />
</div>
</div>
</div>
<div class="small-3 columns col-left" data-equalizer-watch>
<div class="row">
<div class="small-12 columns">
<img src="/images/http://placehold.it/600x300" />
<img src="/images/http://placehold.it/600x300" />
</div>
</div>
</div>
<div class="small-3 columns" data-equalizer-watch>
<img src="/images/http://placehold.it/600x645" />
</div>
<div class="small-3 columns" data-equalizer-watch>
<img src="/images/http://placehold.it/600x645" />
</div>
</div>

Отговори:

въпросът идва от подложката

.col-left img:last-child {
padding-top:1em;
}

при преоразмеряване на прозореца, само блоковете се преоразмеряват, запазва се горната подложка

Препоръчвам да използвате процент там, в този конкретен случай 8% изглежда прави това

.col-left img:last-child {
padding-top:8%;
}