Как в javascript получить реальные размеры картинки (тег img)

Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.

Разберемся как получать реальные размеры изображения.

В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.

Пример кода:

Свойства становятся доступными после загрузки изображения браузером.

Мало букафф? Читайте есчо !

Идем на поклон к Хроносу или самодельный cron на javascript

Март 13, 2010 г.

Недавно я затеял некоторую деятельность по созданию он-лайновой игрушки. Это из разряда хобби, и пока вообще речь не об этом.  Возможно, я что то напишу об этом позже. В отправной точке, при создании он-лайновой игрушки, я стоял перед скромным выбором ...

Читать

Преодоление кросс-доменности в iframe

Январь 14, 2018 г.

Дочерние документы не могут самостоятельно читать данные из родительского фрейма,  если тот находится на другом домене. Возможны исключения для под-доменов одного и того же доменного имени. Все это связано с мерами безопасности и т.п. чепухи. :). Для ...

Читать

Как копировать или клонировать объект в javascript?

Декабрь 10, 2016 г.

В чистом виде js не даёт такой возможности. То как вы будет создавать копии ваших объектов - зависит от вас. [crayon-6aecc6c01b8c0509656254/] т.к. А и B ссылаются на один и тот же объект. Классика Если идти классическим путем, то мы должны запрограммировать ...

Читать

Проверка checkbox состояния checked, jQuery

Февраль 19, 2020 г.

Шаблон для проверки состояния элемента input[type='checkbox']. Код проверяет отмечен элемент или нет. [crayon-6aecc6c01b9e9034612174/] Проверка выполняется с помощью метода is(), который читает в данном случае не атрибуты тега input, а именно ...

Читать
 

Комментарии к «Как в javascript получить реальные размеры картинки (тег img)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: