Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 28, 2018 г.
Javascript библиотека Leaflet для организации работы с картами помимо гео-карт позволяет работать с произвольными наложениями в режиме "без гео-карты". ...
Читать
Ноябрь 22, 2019 г.
Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки.
Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться ...
Читать
Октябрь 25, 2023 г.
Попался мне UI баг, когда autocomplete слой с результатами поиска оказывался больше по ширине, чем input элемент, к которому он был прикреплен.
Не ясен был алгоритм, по которому вычислялась ширина слоя. В одних случаях это происходило корректно, ...
Читать
Май 13, 2022 г.
С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.
Так если ваш скрипт зависит от ...
Читать