티스토리 뷰

javascript 이미지의 크기는 width, height 와 이미지 원본 파일의 실제 크기 naturalWidth, naturalHeight 가 있습니다.


( 제가 올리는 javascript 정보는 jQuery를 기본적으로 사용합니다. )


이미지의 사이즈는 width, height 값을 기본적으로 사용하는데, 이 width, height 값은 화면상에 보이는 크기입니다.


이미지 원본 파일의 실제 크기를 구할때는 naturalWidth, naturalHeight 를 사용합니다.


아래 예제 코드를 보시죠.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  function myinfo(obj){
    $("#myimgwidth").text(obj.width);
    $("#myimgheight").text(obj.height);
    $("#myimgnaturalWidth").text(obj.naturalWidth);
    $("#myimgnaturalHeight").text(obj.naturalHeight);
  }
</script>
<img id="myimg" src="https://t1.daumcdn.net/cfile/tistory/2647BA3456F3F6C32D?original" width="850" border="0" onload="javascript:myinfo(this);">
<div style="padding:10px">
img width : <span id="myimgwidth"></span><br />
img height : <span id="myimgheight"></span><br />
img naturalWidth : <span id="myimgnaturalWidth"></span><br />
img naturalHeight : <span id="myimgnaturalHeight"></span>
</div>

아래와 같이 출력됩니다.

img width :
img height :
img naturalWidth :
img naturalHeight :


댓글
댓글쓰기 폼
공지사항
Total
908,420
Today
196
Yesterday
326
링크
«   2021/02   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28            
글 보관함