Отзывчивые изображения разных размеров на одном уровне

Question

Привет, я хотел бы получить одинаковый размер строк изображений, как на примере, но вы можете видеть, что при изменении размера окна большие изображения меньше столбцов слева. Я сражаюсь с ним в течение длительного времени и до сих пор не нашел решения. Мне нужно иметь его с наложением текста. Так что это еще одна проблема. Спасибо за любые sugestions 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="http://placehold.it/600x300" /> 
      <img src="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="http://placehold.it/600x300" /> 
      <img src="http://placehold.it/600x300" /> 
     </div> 
    </div> 
</div> 
<div class="small-3 columns" data-equalizer-watch> 
    <img src="http://placehold.it/600x645" /> 
</div> 
<div class="small-3 columns" data-equalizer-watch> 
<img src="http://placehold.it/600x645" /> 
</div> 
</div> 

Answer 1

вопрос исходит из дополнения

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

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

Я рекомендую использовать процент, в данном случае 8%, похоже, делает трюк

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