同じレベルで異なるサイズの反応画像 - 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%;
}