0

Necesito calcular el ancho de una imagen, para esto estoy usando java script. En Google Chrome marcha perfecto, tanto si uso jquery como java script puro me calcula perfecto el ancho de la imagen. Pero en firefox me lanza un ancho muy pequeño, de 274 pixeles a pesar de que mi imagen es de 1250 pixeles. He probado reiniciando mi codigo, es decir, abriendo un nuevo documento limpio con solo una imagen, para depurar, y sigue igual, no calcula correctamente ni con java script puro ni con jquery. Tambien he probado borrando las coockies y todo. Tambien he visto que el zoom este al 100%.

<body>
<img id="img" src="image/diseño-web.jpg" alt="diseño web" /> 

<script>
//usando js puro
alert(document.getElementById("img").offsetWidth);
//usando jQuery
alert( $('img').width() )
</script>
</body>
4
  • Probaste con getComputedStyle()? Commented el 16 mar. 2019 a las 17:44
  • me retorna "auto"
    – lalo2019
    Commented el 16 mar. 2019 a las 17:58
  • Necesitas el ancho original o el renderizado? Commented el 16 mar. 2019 a las 18:11
  • la imagen tiene un alto de 650px y un ancho de 1250... esta dentro de un contenedor, y toma su alto al 100%, de manera que su ancho de calcula automaticamente ....por eso necesito saber su ancho , porque es flexible, en diferentes pantallas el alto va a variar, y siempre la imagen lo va a cubrir, y el ancho de la img sera distinto dependiendo del alto
    – lalo2019
    Commented el 16 mar. 2019 a las 18:20

1 respuesta 1

0

Vamos a asegurarnos de que la imagen termina de renderizar correctamente:

document.querySelector('#img').addEventListener('load', (e) => {

    const img = e.currentTarget;

    alert(img.width);

    alert(img.offsetWidth);

    alert(img.naturalWidth);

});

¿Alguna de esas te devuelve correctamente el valor?

5
  • ya borre todas las coockies y sigue arrojando AUTO...probé con el html, y me arroja su ancho correctamente: 1366px.... Pero yo no puedo establecerle un ancho a mi imagen, es decir, por el diseño no debo hacerlo..podria, pero no debo
    – lalo2019
    Commented el 16 mar. 2019 a las 18:05
  • 1
    He editado la respuesta, a ver si una vez cargada la imagen, obtiene bien el ancho Commented el 16 mar. 2019 a las 18:50
  • Ya detecte que se trata de un bug de firefox.¿Podrias revisar mi nueva pregunta para ver si me puedes ayudar?: es.stackoverflow.com/questions/246353/…
    – lalo2019
    Commented el 16 mar. 2019 a las 19:34
  • Claro, pero me puedes indicar si esperar a la carga de la imagen afecta en algo? Commented el 16 mar. 2019 a las 19:54
  • el primer alert me devuelve 1250 (que es correcto), el segundo 1252 y el tercerto tambien 1250...me puedes explicar?... y si puedes tambien comenta por favor en mi otro post ¿por que al presionar f5 me da un valor incorrecto y porque al presionar enter en la barra de direcciones el alert muestra el valor correcto?
    – lalo2019
    Commented el 16 mar. 2019 a las 20:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.