이미지 리사이징 관련 > script

<img 태그로 이미지 넣을때 크기를 지정해서 넣는 상황을 몇가지 재현해 보았습니다.

뭐 그닥 새로울건 없습니다만,,,

잘 안쓰시는 max-width 와 max-height (FF전용 ㅡ.ㅡ; IE 에선 expression을 이용해서 처리함.,) 를 이용해 비율을 유지하는 방법도 넣어두었으니 살펴 보시와요.

미리보기 해보시면 주욱~ 보입니다. ^^
(빨간 상자는 이미지가 돋보이기 위함입니다. 필수 사항 아닙니다.)

궁금하신건 리플로 질문 달아 주세요~.

시간상 뭔가 자세하게 설명을 달지 못해 죄송하네요.
소스 보시고 필요한 상황에서 응용해서 사용하시면 될 듯 합니다. ㅋㅋ

출처 : http://www.alik.info/

<script>
function setPos(img) {
 var diff = 100 - img.offsetHeight; // 100은 스타일에서 지정한 이미지 최대 높이
 if(diff > 0) {
  img.style.marginTop = Math.floor(diff/2) + 'px';
 }
}
</script>
<style>
 body, td { font-size: 9pt;}
 p { margin: 2px 0;}
 span { width: 100px; border:1px solid red; text-align: center; display: block;}
 span.org { width: 400px;}
 span.setheight { height: 100px; }
 span.fixdimension { width: 100px; height: 100px;  overflow: hidden;}
 .resize1 { width: 100px; height: 100px; }
 .resize2 { width: 100px; }
 .resize3 { width: expression((this.width > 100)? ((this.height > 100)? ((this.width < this.height)? true : 100) : 100) :true); height: expression((this.height > 100)? ((this.width > 100)? ((this.width > this.height)? true : 100) : 100) :true); max-width: 100px; max-height: 100px;}
 .resize4 { height: 100px; }
 .resize5 { width: 100px; position: relative;  top: -10px; }
 .resize6 { height: 100px; position: relative; left: -30px;}
</style>

원본 1 (세로가 긴 이미지)
<span class="org"><img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzkxMTBAZnM1LnRpc3RvcnkuY29tOi9hdHRhY2gvMC81NS5qcGc=" /></span>
<p>&nbsp;</p>

일반 리사이즈 (가로 세로 강제 지정 - 비율 무시 됨)
<span><img class="resize1" src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzkxMTBAZnM1LnRpc3RvcnkuY29tOi9hdHRhY2gvMC81NS5qcGc=" /></span>
<p>&nbsp;</p>

일반 리사이즈 (가로 세로중 한 값만 강제 지정 -  비율 유지 됨, 단 지정되지 않은 높이 또는 넓이 예측 불가)
<span><img class="resize2" src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzkxMTBAZnM1LnRpc3RvcnkuY29tOi9hdHRhY2gvMC81NS5qcGc=" /></span>
<p>&nbsp;</p>

max 값을 이용한 리사이즈 (가로 세로 최대값 지정 - 비율 유지됨, 이미지 전체 노출 됨, 비율에 따라 여백 존재함)
<span><img class="resize3" src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzkxMTBAZnM1LnRpc3RvcnkuY29tOi9hdHRhY2gvMC81NS5qcGc=" /></span>
<p>&nbsp;</p>
overflow: hidden 을 이용한 리사이즈 (가로 또는 세로값 지정 - 비율 유지됨, 이미지 부분 노출 됨, 지정 크기 안에서 여백 없음)
<span class="fixdimension"><img class="resize5" src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzkxMTBAZnM1LnRpc3RvcnkuY29tOi9hdHRhY2gvMC81NS5qcGc=" /></span>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
원본 2 (가로가 긴 이미지)
<span class="org"><img src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" /></span>
<p>&nbsp;</p>

일반 리사이즈 (가로 세로 강제 지정 - 비율 무시 됨)
<span><img class="resize1" src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" /></span>
<p>&nbsp;</p>

일반 리사이즈 (가로 세로중 한 값만 강제 지정 -  비율 유지 됨, 단 지정되지 않은 높이 또는 넓이 예측 불가)
<span><img class="resize4" src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" /></span>
<p>&nbsp;</p>

max 값을 이용한 리사이즈 (가로 세로 최대값 지정 - 비율 유지됨, 이미지 전체 노출 됨, 비율에 따라 여백 존재함)
<table border="0" cellspacing="0" cellpadding="0">
<tr>
  <td> <span class="setheight"><img class="resize3" src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" /></span></td>
  <td width=30 align="center">-></td>
  <td><span class="setheight"><img class="resize3" src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" onload="setPos(this);" /></span></td>
  <td>&nbsp; 세로 중앙 정렬은 스크립트로~ ㅡ.ㅡ;</td>
</tr>
</table>
<p>&nbsp;</p>
overflow: hidden 을 이용한 리사이즈 (가로 또는 세로값 지정 - 비율 유지됨, 이미지 부분 노출 됨, 지정 크기 안에서 여백 없음, 이미지의 노출 영역 지정은 position: relative; 에 left: 와 top 을 이용해 조정 가능함)
<span class="fixdimension"><img class="resize6" src="http://photo-media.hanmail.net/200801/09/SpoSeoul/20080109215007.538.0.jpg" /></span>