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

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

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

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

Пример кода:

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

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

Обмен данных Angular с бек-энд на PHP

Ноябрь 11, 2016 г.

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали - frontend, который как то должен взаимодействовать со второй половинкой ...

Читать

Вывод статистики переходов по внешним ссылкам с вашего сайта в Google Analytics

Сентябрь 21, 2018 г.

Аналитика от гугла позволяет регистрировать произвольные (пользовательские) события и выводить по ним статистику. О том, как создать событие пишут многие, ...

Читать

Улучшаем реакцию меню

Апрель 28, 2016 г.

Pull-down - выпадающим меню, работающим на javascript, никого не удивить. Мне не нравится, что оно закрывается мгновенно, как курсор мыши выходит за край выпавшей секции. Немного промахнешься (особенно это часто случается с последними пунктами), и меню ...

Читать

Найти элемент по его классу в HTML на чистом js

Май 4, 2020 г.

Немного ванильного js, на этот раз: как найти контейнер по указанному классу. Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent. В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...

Читать
 

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

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



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