Una gran ayuda proporcionada por CSS para ayudar a los desarrolladores a crear diseños responsive es el atributo max-width. Yo suelo configurar los elementos img, iframe, y en las etiquetas embed a max-width: 100% para que no se extralimiten del elemento padre y se adapten perfectamente en todos los dispositivos móviles, pero recientemente me he preguntado si era posible conseguir el "verdadero" tamaño de una imagen mediante el lenguaje de programación JavaScript. Quería obtener las dimensiones de una imagen reales, sin ninguna modificación CSS. Me he informado sobre una propiedad la cual nunca había oido hablar de ella. Y esta vez sí, me ha proporcionado la información que estaba buscando.
El JavaScript
Usando un poco de magia JavaScript, podemos obtener las dimensiones reales de una imagen de esta manera:
myImage.addEventListener('onload', function() {
console.log('Mi ancho es: ', this.naturalWidth);
console.log('Mi alto es: ', this.naturalHeight);
});
Yo nunca había oído hablar de estas de estas propiedades solo de lectura como son naturalWidth y naturalHeight, pero estoy feliz de que hayan llegado a mi conocimiento. No importa lo que hayas destrozado mediante CSS un elemento img, las dimensiones originales de la imagen siempre estarán disponibles mediante estas funciones. Por supuesto, el evento onload de la imagen debe ser activado antes de comprobar las dimensiones de imagen, ya que no podrá obtener la información sin que la imagen se haya cargado. A partir de ahora dará igual lo que hayas hecho con una imagen mediante CSS, con las propiedades naturalWidth y naturalHeight que te proporcionarán la información relativa al ancho y al alto de la imagen real, conocerás el tamaño exacto de la imagen alojada en el servidor. Ya no tendrás que recurrir a lenguajes del lado del servidor para conocer esa información, ahora también lo podrás hacer mediante el lenguaje de programación Javascript.
Y este ha sido el tutorial sobre obtener el ancho y el alto real de una imagen en Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!