Získejte skutečné rozměry výšky a šířky obrazu

Jednou z masivních pomocí CSS, která pomáhá vývojářům vytvářet responzivní návrhy, je max-width . Vždy nastavuji img , iframe a embed tagy na max-width: 100% aby jim nebylo dovoleno prosakovat přes rodiče a natahovat stránku na mobilech, ale nedávno jsem se sám sebe ptal, jestli by bylo možné získat „skutečnou“ velikost obrázku pomocí JavaScriptu. Chtěl jsem skutečné rozměry obrázku bez jakýchkoli úprav CSS. MDN mě informovalo o nemovitosti, o které jsem nikdy neslyšel, a která mi poskytla informace, které jsem chtěl!

JavaScript

Pomocí nějaké JavaScriptové magie můžeme získat skutečné rozměry obrázku:

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

O těchto naturalWidth jsem nikdy neslyšel a naturalHeight vlastnosti, ale jsem rád, že jsou k dispozici. Bez ohledu na to, jak hrozné CSS mangle img prvek, jsou k dispozici původní rozměry obrázku. Obrázek má samozřejmě onload událost by měla být spuštěna před kontrolou rozměrů obrázku, protože bez načtení obrázku je nemůžete znát.