Designul receptiv este un lucru minunat. Site-urile sunt ușor adaptate la dispozitiv, inclusiv imaginile încărcate de utilizatori. Astăzi, când
deja utilizate în mod liber în dezvoltare, există încă situații în care pur și simplu dimensiunea imaginii descărcate.
În mod normal, în astfel de situații, încărcăm o imagine fără a specifica dimensiunile:
Imaginea este încărcată cu dimensiunile originale și trebuie doar să adăugăm un mic CSS, astfel încât să se comporte în mod responsabil:
var meuimage = document.getElementById ("myimage"); var w = miimage.width; lățimea curentă, de ex. 400px var h = myimage.height; înălțimea curentă, de ex. 300px
Din fericire, browserele HTML5 moderne oferă două proprietăți avansate:
var rw = miimage.naturalWidth; // lățimea reală a imaginii var rh = myimage.naturalHeight; // înălțime reală a imaginii
Aceste proprietăți sunt acceptate în IE9, Firefox, Chrome, Safari și Opera. Amintiți-vă că imaginea trebuie să fie complet încărcată înainte de a vă întoarce la aceste proprietăți.
Pentru a verifica acest lucru, puteți utiliza evenimentul "încărcare" în fereastră sau utilizați testul .complete direct pe imagine înainte de a obține valorile lățimii și înălțimii.
IE6, 7 și 8
naturalWidth și .naturalHeight nu sunt acceptate în versiunile mai vechi ale Internet Explorer. Dar putem determina dimensiunile reale prin încărcarea imaginii în memorie și determinarea înălțimii și lățimii standard.
Articole similare
Trimiteți-le prietenilor: