Чуйний дизайн прекрасна річ. Сайти з легкістю адаптуються під пристрій, в тому числі і завантажувані користувачем зображення. Сьогодні, коли
вже може вільно використовуватися в розробці все-таки трапляються ситуації, коли ми просто масштабується завантажене зображення.
Як правило в таких ситуаціях ми завантажуємо зображення не вказуючи розмірів:
Картинка завантажитися з вихідними розмірами і нам треба всього-лише додати трохи CSS щоб вона вела себе чуйне:
var myimage = document.getElementById ( "myimage"); var w = myimage.width; // current width, e.g. 400px var h = myimage.height; // current height, e.g. 300px
На щастя, сучасні HTML5 браузери надають два просунутих властивості:
var rw = myimage.naturalWidth; // real image width var rh = myimage.naturalHeight; // real image height
Ці властивості підтримуються в IE9, Firefox, Chrome, Safari і Opera. Пам'ятайте, що картинка повинна бути повністю завантажена, перед тим, як ми звернемося до цих властивостей.
Щоб переконатися в цьому, ви можете використовувати подія "load" по відношенню до window або використовувати перевірку на властивість .complete безпосередньо у зображення, перед тим як отримувати значення ширини і висоти.
IE6, 7 і 8
naturalWidth і .naturalHeight не підтримуються в старих версіях Internet Explorer. Але ми можемо визначити справжніх розмірів, завантажуючи зображення в пам'ять і визначати стандартні висоту і ширину.