이미지 비율에 따른 div 높이 변경 방법

반응형 혹은 모바일 페이지에 대한 코딩을 할 때 항상 고민인 부분이 바로 이미지 처리다.

이미지가 모두 같은 크기를 가지고 있지 않기 때문에, 단순히 넓이만 맞춘다고 모든게 해결 되지 않는다.

그래서 찾은 방법은 아래와 같다.

<div class="thumbnail-wrapper">

<div class="thumbnail">

<img src="xxxx">

</div>

 </div>

.thumbnail-wrappper { width: 25%; }

.thumbnail { position: relative; padding-top: 100%; /* 1:1 ratio */ overflow: hidden; }

img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }

출처 : http://webdir.tistory.com/487

위 같이 padding을 %로 비율 조정해주면 이미지 모양이나 크기가 제법 괜찮게 나온다