HTMLImageElement: height 属性
HTMLImageElement 接口的 height 属性指示图像被绘制时的高度，以 CSS 像素 为单位（如果图像正在被绘制或渲染到任何视觉媒介，例如屏幕或打印机）；否则，它是图像的自然、经过像素密度校正的高度。
值
一个表示图像高度的整数值。高度的定义方式取决于图像是否正在被渲染到视觉媒介。
- 如果图像正在被渲染到视觉媒介，例如屏幕或打印机，则高度以 CSS 像素 为单位表示。
- 否则，图像的高度使用其自然（内在）高度表示，并根据
naturalHeight指示的显示密度进行调整。
示例
在此示例中，使用 srcset 属性为时钟图像提供了两种不同的尺寸。一种是 200 像素宽，另一种是 400 像素宽。此外，还提供了 sizes 属性来指定给定视口宽度时应绘制图像的宽度。
HTML
具体来说，对于宽度高达 400 像素的视口，图像将以 200 像素的宽度绘制；否则，将以 300 像素的宽度绘制。
html
<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
alt="Clock"
srcset="
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
"
sizes="(width <= 400px) 200px, 300px" />
JavaScript
JavaScript 代码会查看 height 以确定图像在当前绘制宽度下的高度。
js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateHeight = () => {
output.innerText = clockImage.height;
};
updateHeight();
window.addEventListener("resize", updateHeight);
结果
这个示例可能更容易 在自己的窗口中 尝试。
规范
| 规范 |
|---|
| HTML # dom-img-height-dev |
浏览器兼容性
加载中…