Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Август 5, 2018 г.
Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js.
Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...
Читать
Апрель 11, 2018 г.
swiper js - jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.
SWIPER на GITHUB.
Это стандартный шаблон, который ...
Читать
Июнь 13, 2018 г.
На мобильных устройствах с сенсорным экраном обычно нет такого элемента ввода информации как мышь и соответствующих событий - mousewheel. Все манипуляции производится касаниями к экрану.
Листая касанием одного пальца, вы прокручиваете веб-страницу, ...
Читать
Сентябрь 7, 2013 г.
Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню.
Неудобным будет тот случай, когда мы хотим попасть на страницу в глубине иерархии этого меню. Нам придется последовательно заходить на родительские ...
Читать