Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 13, 2022 г.
С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.
Так если ваш скрипт зависит от ...
Читать
Сентябрь 22, 2016 г.
Не так принципиально, какой библиотекой мы воспользуемся, когда будем убирать фокус, я привык использовать jQuery. Потому речь пойдет в контексте этой библиотеки.
Сложностей с тем как снять фокус с элемента традиционно больше, чем с тем, как его ...
Читать
Январь 8, 2016 г.
Продемонстрирую алгоритм работы с полем radio для универсального случая, когда мы не знаем существует ли поле, одно у него значение в форме или оно может принимать значение из некоторого набора (случай списка из радио-кнопок).
На практике, часто ...
Читать
Апрель 11, 2018 г.
swiper js - jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.
SWIPER на GITHUB.
Это стандартный шаблон, который ...
Читать