Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 11, 2018 г.
swiper js - jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.
SWIPER на GITHUB.
Это стандартный шаблон, который ...
Читать
Апрель 5, 2025 г.
Делюсь еще одним лайфхаков, как в плагине CKE5 вставить htmlentity.
При вставке текста в модель, CKEditor будет преобразовывать html символы вроде '&' и '>'. Но что делать, если нужно вставить символ в виде html кода?
Рассмотрим следующий ...
Читать
Апрель 22, 2016 г.
В CSS такого селектора нет, в вот jQuery предоставляет.
Впрочем, нужно понимать, какие объекты jQuery считает видимыми, а какие наоборот -невидимыми. К примеру, видимым будет считаться и объект с visiblity: hidden и объект с opacity: 0. Они хоть ...
Читать
Октябрь 26, 2015 г.
Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...
Читать