Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. Контейнер img имеет два свойства naturalWidth и naturalHeight, которые и предоставляют необходимую информацию. Данные свойства поддерживаются всеми современными браузерами.
Пример кода:
|
|
var imgElement = $('img').get(0); var width = imgElement.naturalWidth; var height = imgElement.naturalHeight; |
Свойства становятся доступными после загрузки изображения браузером.
Данная запись опубликована в 17.09.2018 22:00 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 8, 2023 г.
В Drupal 9/10 нет jQuery плагина once(), потому при использовании этой функции вы увидите сообщение о том, что once - не является функцией.
Плагин удобен, но его не сложно заменить в коде буквально парой вставок. Он работает по следующему алгоритму ...
Читать
Июнь 21, 2025 г.
Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете ...
Читать
Декабрь 15, 2016 г.
В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве.
Подготовить такой ...
Читать
Июль 6, 2018 г.
Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера.
Чтобы сделать переход плавно, можно использовать функцию jQuery().animate().
Суть процесса такова - вычисляем вертикальную позицию требуемого ...
Читать