HTMLImageElement: свойство naturalWidth
Базовая линия Широко поддерживается
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Чтение только naturalWidth свойство интерфейса HTMLImageElement возвращает внутреннюю (естественную), скорректированную по плотности ширину изображения в CSS-пикселях.
Это ширина изображения, если оно отрисовывается без каких-либо ограничений по ширине; если вы не указываете ширину для изображения и не размещаете изображение внутри контейнера, ограничивающего или явно определяющего ширину изображения, это будет количество CSS-пикселей в ширину изображения.
Соответствующий метод naturalHeight возвращает естественную высоту изображения.
Примечание: В большинстве случаев естественная ширина — это фактическая ширина изображения, отправленного сервером. Тем не менее, браузеры могут изменять изображение перед передачей его рендереру. Например, Chrome ухудшает разрешение изображений на устройствах с низкой производительностью. В таких случаях naturalWidth будет учитывать ширину изображения, изменённую такими вмешательствами браузера, как естественная ширина, и возвращает это значение.
Значение
Целое число, указывающее внутреннюю ширину изображения в CSS-пикселях. Это ширина, при которой изображение естественным образом отображается, когда для него не установлено никаких ограничений или конкретных значений. Эта естественная ширина корректируется на плотность пикселей устройства, на котором она отображается, в отличие от значения width.
Если внутренняя ширина недоступна — либо потому, что изображение не указывает внутреннюю ширину, либо потому, что данные изображения недоступны для получения этой информации, naturalWidth возвращает 0.
Примеры
См. HTMLImageElement.naturalHeight, чтобы посмотреть примеры кода, отображающего изображение как в его естественном "откорректированном по плотности" размере, так и в его рендерном размере, изменённом CSS страницы и другими факторами.
Спецификации
| Спецификация |
|---|
| HTML # dom-img-naturalwidth-dev |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
naturalWidth |
1 | 12 | 1 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth
