Obter dimensões reais de altura e largura da imagem

Uma grande ajuda fornecida pelo CSS para ajudar os desenvolvedores a criar designs responsivos é o max-width. Eu sempre defino img, iframe, e embed tags para max-width: 100% para que elas não possam sangrar através de seus pais e esticar a página em celulares, mas recentemente me perguntei se era possível obter o tamanho “verdadeiro” de uma imagem com JavaScript. Eu queria as dimensões reais da imagem sem nenhuma modificação de CSS. MDN me informou sobre uma propriedade da qual eu nunca tinha ouvido falar e que me forneceu as informações que eu queria!

O JavaScript

Usando alguma mágica do JavaScript, podemos obter as dimensões reais de uma imagem:

myImage.addEventListener('load', function() {
	console.log('My width is: ', this.naturalWidth);
	console.log('My height is: ', this.naturalHeight);
});

Eu nunca tinha ouvido falar desses senhores. naturalWidth e naturalHeight mas estou feliz por elas estarem disponíveis. Não importa o quanto o CSS manipule uma propriedade img as dimensões originais da imagem estão disponíveis. É claro que o elemento onload da imagem deve ser acionado antes de verificar as dimensões da imagem, pois o senhor não pode conhecê-las sem que a imagem seja carregada.