同じレベルの異なるサイズの応答画像

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%; 
}