페이지에서 이미지의 크기를 가져 오는 JavaScript 또는 jQuery API 또는 메소드가 있습니까?
답변
자바 스크립트를 사용하여 프로그래밍 방식으로 이미지를 가져 와서 치수를 확인할 수 있습니다 …
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';이미지가 마크 업의 일부가 아닌 경우에 유용 할 수 있습니다.
답변
clientWidth 및 clientHeight 는 DOM 요소의 내부 차원에 대한 현재 브라우저 크기를 표시하는 DOM 속성입니다 (여백 및 경계 제외). 따라서 IMG 요소의 경우 보이는 이미지의 실제 크기를 가져옵니다.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
답변
또한 (Rex 및 Ian의 답변 외에도) :
imageElement.naturalHeight과
imageElement.naturalWidth이미지 요소가 아닌 이미지 파일 자체의 높이와 너비를 제공합니다.
답변
jQuery를 사용 중이고 이미지 크기를 요청하는 경우 이미지 크기가로드 될 때까지 기다려야합니다. 그렇지 않으면 0 만 얻을 수 있습니다.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});답변
이 답변에 대한 업데이트는 가장 투표가 많은 답글 중 하나가 using clientWidth및 clientHeight를 제안하기 때문에 유용 하다고 생각합니다.
실제로 어떤 값이 반환되는지 확인하기 위해 HTML5로 몇 가지 실험을 수행했습니다.
우선, Dash라는 프로그램을 사용하여 이미지 API에 대한 개요를 얻었습니다. 그것은한다고 height및 width이미지의 렌더링 및 그 높이 / 너비 naturalHeight및 naturalWidth이미지의 극한 높이 / 너비 (단 HTML5이다).
높이 300과 너비 400의 파일에서 아름다운 나비 이미지를 사용했습니다.
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());그런 다음 높이와 너비에 인라인 CSS와 함께이 HTML을 사용했습니다.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />결과 :
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150그런 다음 HTML을 다음과 같이 변경했습니다.
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />즉, 인라인 스타일 대신 높이 및 너비 속성 사용
결과 :
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115그런 다음 HTML을 다음과 같이 변경했습니다.
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />즉, 속성과 CSS를 모두 사용하여 어느 것이 우선하는지 확인하십시오.
결과 :
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150답변
JQuery를 사용하여 다음을 수행하십시오.
var imgWidth = $("#imgIDWhatever").width();답변
다른 모든 것들은 잊어 버린 것은로드 전에 이미지 크기를 확인할 수 없다는 것입니다. 작성자가 게시 된 모든 메소드를 확인하면 아마도 localhost에서만 작동합니다. 여기에서 jQuery를 사용할 수 있으므로 이미지가로드되기 전에 ‘준비’이벤트가 시작된다는 것을 기억하십시오. $ ( ‘# xxx’). width () 및 .height ()는 onload 이벤트 이상에서 실행되어야합니다.
