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

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

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

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

Пример кода:

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

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

Копирование текста в буфер обмена на js

Март 12, 2024 г.

Есть устаревший способ, с которым можно ознакомиться здесь, а ниже мы рассмотрим рекомендуемый подход. Для работы с буфером обмена был внедрен Clipboard API. Он позволяет не только двунаправленно работать с буфером обмена, но также и обрабатывать ...

Читать

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

Апрель 28, 2016 г.

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

Читать

Обработка события click или touchstart

Октябрь 31, 2018 г.

Широкое применение мобильных устройств для доступа в интернет накладывает свои специфические требования на разработку веб-сайтов. Привычный обработчик onclick может срабатывать совместно с ontouchstart, а может не срабатывать вовсе на мобильном устройстве. ...

Читать

Как получить кол-во слайдов в slick слайдере

Апрель 9, 2024 г.

Слайдер классный, а вот документация какая то вялая. Сначала нужно найти DOM элемент, куда подключен slick, а потом получить объект слайдера, в котором можно прочитать множество свойств, в том числе и число слайдов: [crayon-6a9184b744c1d544148981/]

Читать
 

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

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



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