Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Март 27, 2021 г.
Когда слайдов много, то пользователи постоянно видят одни и те же слайды, что загружены первыми. Потому хотелось бы их переставлять в случайном порядке при каждой загрузке слайдера (я пользуюсь плагином swiper.js).
Т.к. слайдер не даёт такой опции, ...
Читать
Февраль 2, 2018 г.
Столкнулся с данной проблемой в своей работе. Опишу более подробно.
Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...
Читать
Декабрь 3, 2016 г.
Продолжая тему работы с ng-repeat в Ангуляр фреймворк, хочу рассказать о том, как работать с кастомными фильтрами.
Можно вернуться к примеру в прошлой ...
Читать
Ноябрь 22, 2019 г.
Специально для Артура, задающего вопрос в статье про swiper, привожу пример как вывести в swiper.js вместо штатных булетов навигации некие кастомные текстовые метки.
Swiper.js позволяет глубоко кастомизировать все свои элементы. Достаточно обратиться ...
Читать