같은 크기의 다른 크기의 반응 이미지

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