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

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

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

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

Пример кода:

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

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

Создание контейнера DIV средствами чистого js

Август 5, 2018 г.

Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js. Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...

Читать

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

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

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

Читать

Переменные окружения React для dev и prod

Сентябрь 15, 2023 г.

Если вы разрабатываете SPA на Reactjs, используя npx create-react-app my-app команду для создания проекта, то в коробке вы получаете множество полезных ...

Читать

Манипуляции с битами в JS

Май 12, 2023 г.

Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия. У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля. Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...

Читать
 

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

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



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