Determinați dimensiunea reală a imaginii în javascript

Designul receptiv este una dintre cele mai utile metode web. Amplasarea site-ului poate fi adaptată ecranului dispozitivului, indiferent de rezoluția utilizată de dispozitiv.

Imaginile sunt de obicei codate fără atribute de lățime și înălțime, de exemplu,

Imaginea va avea o dimensiune reală și putem adăuga un pic CSS pentru imagine și nu putem depăși dimensiunile actuale.

Din fericire, browserele HTML5 moderne oferă două proprietăți suplimentare:

Proprietățile sunt acceptate în IE9. Firefox. Chrome. Safari și Opera. Rețineți că imaginea trebuie să fie complet încărcată la dimensiunile disponibile. Pentru a vă asigura că imaginea este gata, puteți atașa evenimentele "încărcare" în fereastra sau imaginea în sine sau verificați imaginile .complete înainte de a testa dimensiunile.

IE6, 7 și 8

NaturalWidth și. NaturalHeight nu este acceptat în edițiile mai vechi ale Internet Explorer. Încă putem determina dimensiunile reale, încărcăm imaginile pe obiect în memorie și studiem proprietățile lățimii și înălțimii standard, de exemplu,

Astfel de lucruri fac din programul programatorului ceva mai ușor.

Postări interesante