Saneef
¿Existe una API o método de JavaScript o jQuery para obtener las dimensiones de una imagen en la página?
rex m
ancho del cliente y altura del cliente son propiedades DOM que muestran el tamaño actual en el navegador de las dimensiones internas de un elemento DOM (excluyendo el margen y el borde). Entonces, en el caso de un elemento IMG, obtendrá las dimensiones reales de la imagen visible.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
-
@Nicky exactamente correcto. Da las dimensiones de la imagen. como se representa en ese caso.
– Rex M
1 de septiembre de 2011 a las 9:33
-
@Mat-visual
$.fn.widthy$.fn.height.– yckart
2 de abril de 2013 a las 6:05
-
La respuesta correcta es usar img.naturalWidth y img.naturalHeight
– Pulpo
12 de octubre de 2013 a las 4:33
-
document.getElementByIdes más largo de escribir pero 10 veces más rápido que$('#...')[0].– bfontaine
12 de agosto de 2014 a las 9:57
-
@RexM En Chrome 35, es 16 veces más rápido: jsperf.com/document-getelementbyid-vs-jquery/5
– bfontaine
12 de agosto de 2014 a las 13:52
Si está utilizando jQuery y está solicitando tamaños de imagen, debe esperar hasta que se carguen o solo obtendrá ceros.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
-
¿La anchura y la altura están siempre disponibles en el dispositivo tomacargas?
– Anders Lindén
12/09/2014 a las 12:35
-
@AndersLindén: vea la tinta que Akseli agregó para el evento de carga. Hay un apartado específico dedicado a las imágenes. La respuesta técnica es “no”, pero en la práctica nunca he tenido problemas con nuestros sitios que usan este método.
– mrtsherman
15/09/2014 a las 19:36
-
Pero si la respuesta técnica es no, ¿es inservible? ¿no es así?
– Anders Linden
16 de septiembre de 2014 a las 6:14
-
¿Es posible obtener los atributos de la imagen antes de que se cargue?
– no nein
17 de marzo de 2019 a las 16:57
Pedro Mortensen
Usando clientWidth y clientHeight es, creo, ahora obsoleto.
He hecho algunos experimentos con HTML5 para ver qué valores se devuelven realmente.
En primer lugar, utilicé un programa llamado Dash para obtener una descripción general de la API de imágenes.
Se afirma que height y width son el alto/ancho renderizado de la imagen y eso naturalHeight y naturalWidth son el alto/ancho intrínseco de la imagen (y son solo HTML5).
Usé una imagen de una hermosa mariposa, de un archivo con altura 300 y ancho 400. Y este código JavaScript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Luego usé este HTML, con CSS en línea para la altura y el ancho.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Resultados:
/* Image element */ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
Luego cambié el HTML a lo siguiente:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
Es decir, utilizando atributos de alto y ancho en lugar de estilos en línea.
Resultados:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 90 width() == 115
/* Actual rendered size */ 90 115
Luego cambié el HTML a lo siguiente:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Es decir, usando tanto atributos como CSS, para ver cuál tiene prioridad.
Resultados:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
-
¿La anchura y la altura están siempre disponibles en el dispositivo tomacargas?
– Anders Lindén
12/09/2014 a las 12:35
-
@AndersLindén: vea la tinta que Akseli agregó para el evento de carga. Hay un apartado específico dedicado a las imágenes. La respuesta técnica es “no”, pero en la práctica nunca he tenido problemas con nuestros sitios que utilizan este método.
– mrtsherman
15/09/2014 a las 19:36
-
Pero si la respuesta técnica es no, ¿es inservible? ¿no es así?
– Anders Lindén
16 de septiembre de 2014 a las 6:14
-
¿Es posible obtener los atributos de la imagen antes de que se cargue?
– no nein
17 de marzo de 2019 a las 16:57
Pedro Mortensen
Usando jQuerytu hiciste esto:
var imgWidth = $("#imgIDWhatever").width();
-
¿Y si la imagen aún no se ha cargado?
–James Westgate
2 de junio de 2011 a las 9:30
Es fácil con los navegadores modernos: davidwalsh.name/get-image-dimensions
– Yarin
9 de enero de 2015 a las 5:08
La mayoría de las respuestas a continuación solo obtienen el ancho y la altura del estilo, no el ancho y la altura de la imagen real. Utilizar
imgElement.naturalWidthyimgElement.naturalHeightpara obtener ancho y alto.– Bamdad
29 de diciembre de 2020 a las 8:09
Independientemente de si desea utilizar Javascript o jQuery es imprescindible que la imagen sea visible en el navegador. En la práctica, ni la imagen ni los elementos padres deben tener la regla
display:none;.– Vincenzo Di Gaetano
4 de septiembre de 2022 a las 9:31