Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 12, 2023 г.
Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия.
У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля.
Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...
Читать
Май 4, 2020 г.
Немного ванильного js, на этот раз: как найти контейнер по указанному классу.
Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent.
В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...
Читать
Март 21, 2025 г.
Один из режимов навигации в Swiper - называется freemode. Он позволяет листать слайды (тащить мышкой или свайпить) без фиксации на границах слайда. Но если вы используете навигацию, то перелистывание будет производиться дискретно по слайдам.
В ...
Читать
Сентябрь 19, 2018 г.
JavaScript в web был когда то всего лишь приятным дополнением. А сейчас сложно найти сайт, который не использует скрипты.
А если уж часть шаблона формируется скриптом, то без много-строчных констант не обойтись. Но в javascript с ними не так все ...
Читать