Статьи

HTML5-адаптивный дизайн: как определить реальные размеры изображения в JavaScript

Декабрь 31, 2018

Адаптивный дизайн — одна из самых полезных веб-техник, появившаяся за последние несколько лет. Макет веб-сайта может адаптироваться к экрану устройства и выглядеть красиво независимо от используемого разрешения.

Адаптивные изображения обычно кодируются без атрибутов ширины и высоты, например 


<img id="myimage" src="myimage.jpg" alt="my image" />

Размер изображения будет сам по себе, и мы можем добавить немного CSS, чтобы изображение не превышало его реальных размеров. 

 
#myimage
{
	max-width: 100%;
}

Часто необходимо манипулировать этими масштабированными изображениями в JavaScript; возможно для игры, лайтбокса или эффекта анимации. В этих ситуациях вам необходимо определить реальную высоту и ширину изображения. Однако свойства widthheight 

 
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» к окну или к самому изображению, либо проверить свойство .complete

IE6, 7 и 8

.naturalWidth.naturalHeight Мы все еще можем определить реальные размеры, загрузив изображение в объект в памяти и исследуя стандартные свойства widthheight 

 
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;
}

Я постоянно удивляюсь, обнаружив эти новые свойства и методы; они делают нашу жизнь немного проще.

32
Share: