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

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

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

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

Пример кода:

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

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

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

Май 12, 2023 г.

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

Читать

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

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

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

Читать

Раздвигающееся вертикальное меню Drupal 6

Сентябрь 7, 2013 г.

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

Читать

Смещение карты только при двойном касании в Leaflet

Июнь 13, 2018 г.

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

Читать
 

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

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



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