2015년 3월 24일 화요일

브라우저 크기에 따라 이미지 리사이징

모바일, 웹의 브라우저의 크기에 따라 유동적으로 삽입된 이미지가 함께 리사이징 되는 효과.
<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>  
<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div> 

여기서 58.536585%는 알아서. 나는 가로사이즈가 꽉 차있어야 하는 상황이었기때문에 100%으로 변경했다.


출처 : http://stackoverflow.com/questions/4572621/auto-image-resize-based-on-browser-window-dimensions