Hogyan állapítható meg, a tényleges mértékét a kép javascript, mester-web
Az adaptív tervezés szép dolog. Sites könnyen alkalmazkodni a készülék, beleértve a képeket, hogy a felhasználó által letöltött. Ma, amikor
Már lehet szabadon használható a fejlesztés még vannak olyan helyzetek, amikor egyszerűen skála a betöltött kép.
Általában ezekben a helyzetekben, mi kép betöltése megadása nélkül méretei:
Indító képet az eredeti méretét, és szükségünk van minden, csak adjunk hozzá egy kis CSS viselkedjen reagáló:
var myImage = document.getElementById ( "myImage"); var w = myimage.width; // aktuális szélessége, így például 400px var h = myimage.height; // aktuális magassága, pl 300px
Szerencsére a modern HTML5 böngészők két fejlett funkciók:
var rw = myimage.naturalWidth; // valós kép szélessége var rp = myimage.naturalHeight; // valós kép magassága
Ezek a funkciók támogatottak IE9, Firefox, Chrome, Safari és az Opera. Ne feledje, hogy a kép legyen teljesen megterhelt, mielőtt rátérünk ezeket a tulajdonságokat.
Ennek ellenőrzéséhez használhatja esemény „terhelés” tekintetében az ablak, vagy használjon egy ellenőrzést .complete ingatlan közvetlenül a kép, mielőtt elindul a szélesség és magasság értékeket.
IE6, 7 és 8
naturalWidth .naturalHeight, és nem támogatja a régebbi verziójú Internet Explorer. De tudjuk meg a tényleges méreteit, a kép feltöltése a memóriába, és meghatározzuk a magasság és a szélesség.