Отзывчивый дизайн прекрасная вещь. Сайты с легкостью адаптируются под устройство, в том числе и загружаемые пользователем изображения. Сегодня, когда
Как правило в таких ситуациях мы загружаем изображение не указывая размеров:
<img id="myimage" src="myimage.jpg" alt="my image" /> |
Картинка загрузиться с исходными размерами и нам надо всего-лишь добавить немного CSS чтобы она вела себя отзывчиво:
#myimage { max-width: 100%; } |
Но часто бывает так, что нам приходится манипулировать размерами изображения с помощью JavaScript. В таких ситуациях нам нужно определить реальные ширину и высоту для изображения. Но свойства width
и height
будут возвращать измененные в зависимости от viewport размеры:
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. Но мы можем определить действительные размеры, загружая изображение в память и определять стандартные высоту и ширину.
var myimage = document.getElementById("myimage"); if (typeof myimage.naturalWidth == "undefined") { // IE 6/7/8 var i = new Image(); i.src = myimage.src; var rw = i.width; var rh = i.height; } else { // HTML5 browsers var rw = myimage.naturalWidth; var rh = myimage.naturalHeight; } |