브라우저에 표시된 이미지의 크기는 실제 높이와 너비가 아닐 수 있습니다. 예를 들어, 아래와 마찬가지로 너비와 높이 스타일을 추가합니다.
<img src = "ie.png">
브라우저의 크기는 25px입니다. 그렇다면 우리는 어떻게 사진의 실제 크기를 얻을 수 있습니까? , 다음 코드는이 기능을 구현합니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
</head>
<body>
<img src = "ie.png"id = "image">
<cript>
// 이미지 로딩이 완료되도록 지연 설정
settimeout (function () {
var
real_width,
real_height,
_im = document.getElementById ( 'image'),
im = document.createElement ( 'IMG');
im.src = _im.src,
real_width = im.width,
real_height = im.height;
alert (real_width+'/n'+real_height);
}, 500);
</스크립트>
</body>
</html>
참고 : IE7+ 및 Chrome에서 위의 코드를 테스트했습니다. IE6이 설치되지 않았기 때문에 테스트 할 수 없기 때문입니다.
매우 유용한 코드, 나는 대부분의 프로젝트에서 사용합니다. 자유롭게 사용하십시오.