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

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

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

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

Пример кода:

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

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

Инициировать скачивание файла без обращения к серверу, используя js

Июль 31, 2023 г.

Если файл генерируется на фронт-енд, то как инициировать скачивание файла в js? Давайте посмотрим. Скачивание инициируется после нажатия пользователем на ссылку в браузере. Потому мы создадим элемент ANCHOR и выполним клик по нему. Так как ...

Читать

Перехват ошибок на front-end с помощью js

Январь 24, 2021 г.

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

Читать

Fancybox прокручивает основное окно к верху

Июль 13, 2016 г.

Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться? Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...

Читать

Инициализация карты google после изменения размеров контейнера карты

Февраль 2, 2018 г.

Столкнулся с данной проблемой в своей работе. Опишу более подробно. Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...

Читать
 

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

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



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