HTMLImageElement: naturalHeight property

Giá trị

Một giá trị số nguyên biểu thị chiều cao nội tại của hình ảnh, tính bằng pixel CSS. Đây là độ cao mà hình ảnh được vẽ một cách tự nhiên khi không có ràng buộc hoặc giá trị cụ thể nào được thiết lập cho hình ảnh. Chiều cao tự nhiên này được điều chỉnh theo mật độ điểm ảnh của thiết bị mà nó được hiển thị, không giống như height.

Nếu chiều cao nội tại không có sẵn—do hình ảnh không chỉ định chiều cao nội tại hoặc do dữ liệu hình ảnh không có sẵn để lấy thông tin này, naturalHeight trả về 0.

Ví dụ

Ví dụ này hiển thị cả kích thước tự nhiên, được điều chỉnh theo mật độ của hình ảnh cũng như kích thước được hiển thị của nó khi được thay đổi bởi CSS của trang và các yếu tố khác.

HTML

<div class="box">
  <img
    src="/vi/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png"
    class="image"
    alt="A round wall clock with a white dial and black numbers" />
</div>
<pre></pre>

HTML có hình ảnh 400x398 pixel được đặt bên trong <div>.

CSS

.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

Điều chính cần lưu ý trong CSS ở trên là kiểu được sử dụng cho vùng chứa hình ảnh sẽ được vẽ có chiều rộng 200px và hình ảnh sẽ được vẽ để lấp đầy chiều rộng của nó (100%).

JavaScript

const output = document.querySelector("pre");
const image = document.querySelector("img");

image.addEventListener("load", (event) => {
  const { naturalWidth, naturalHeight, width, height } = image;
  output.textContent = `
Natural size: ${naturalWidth} x ${naturalHeight} pixels
Displayed size: ${width} x ${height} pixels
`;
});

Mã JavaScript chuyển các kích thước tự nhiên và kích thước được hiển thị vào <pre>. Điều này được thực hiện để phản hồi trình xử lý sự kiện load của hình ảnh, nhằm đảm bảo rằng hình ảnh có sẵn trước khi thử kiểm tra chiều rộng và chiều cao của nó.

Kết quả

Thông số kỹ thuật

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

Xem thêm

• HTMLImageElement.height
• HTMLImageElement.naturalWidth