HTMLImageElement: height property

Giá trị

Một giá trị số nguyên biểu thị chiều cao của hình ảnh. Cách xác định chiều cao tùy thuộc vào việc hình ảnh có được hiển thị trên phương tiện trực quan hay không.

• Nếu hình ảnh đang được hiển thị trên phương tiện trực quan như màn hình hoặc máy in thì chiều cao được biểu thị bằng CSS pixels.
• Mặt khác, chiều cao của hình ảnh được thể hiện bằng chiều cao tự nhiên (nội tại) của nó, được điều chỉnh theo mật độ hiển thị như được biểu thị bằng naturalHeight.

Ví dụ

Trong ví dụ này, hai kích thước khác nhau được cung cấp cho hình ảnh đồng hồ bằng thuộc tính srcset. Một cái rộng 200px và cái kia rộng 400px. Hơn nữa, thuộc tính sizes được cung cấp để chỉ định chiều rộng mà hình ảnh sẽ được vẽ dựa trên chiều rộng của khung nhìn.

HTML

Đối với các khung nhìn có chiều rộng tối đa 400px, hình ảnh được vẽ ở chiều rộng 200px. Nếu không, nó sẽ được vẽ ở độ phân giải 400px.

<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
  src="/vi/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
  alt="Clock"
  srcset="
    /vi/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
    /vi/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
  "
  sizes="(width <= 400px) 200px, 300px" />

JavaScript

Mã JavaScript xem xét height để xác định chiều cao của hình ảnh dựa trên chiều rộng hiện tại của hình ảnh.

const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateHeight = () => {
  output.innerText = clockImage.height;
};

updateHeight();
window.addEventListener("resize", updateHeight);

Kết quả

Ví dụ này có thể dễ dàng thử hơn in its own window.

Thông số kỹ thuật

Khả năng tương thích của trình duyệt

Xem thêm

• HTMLImageElement.width
• HTMLImageElement.naturalHeight
• HTMLCanvasElement.height
• HTMLEmbedElement.height
• HTMLIFrameElement.height
• HTMLObjectElement.height
• HTMLSourceElement.height
• HTMLVideoElement.height