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