Zjištění skutečných rozměrů obrázku

V novějších prohlížečích, než je Internet Explorer 8, lze použít obrazek.naturalWidth, respektive obrazek.naturalHeight.

<img src="logo.png" width=500 height=100 id=obrazek>

Ve starších prohlížečích lze využít načtení pomocného obrázku pomocí new Image() (podobně jako při testování, zda obrázek existuje).

function zjistitSkutecnyRozmer(obr) {
    var pomocnyObrazek = new Image();
    pomocnyObrazek.src = obr.src;
    return {
      sirka: pomocnyObrazek.width, 
      vyska: pomocnyObrazek.height
    };
  }

Použití:

var obrazek = document.getElementById('obrazek');
var skutecna = zjistitSkutecnyRozmer(obrazek);
alert(
  "Skutečná šířka: " + skutecna.sirka + 
  " a výška: " + skutecna.vyska
);

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře