Thuộc tính height của HTML <img>
Định nghĩa và cách sử dụng
height Thuộc tính xác định chiều cao của hình ảnh bằng đơn vị pixel.
Lưu ý:Hãy luôn chỉ định height và Thuộc tính width。Nếu đã thiết lập chiều cao và chiều rộng, sẽ để trống không gian cần thiết cho hình ảnh khi tải trang. Ngược lại, nếu không có các thuộc tính này, trình duyệt sẽ không biết kích thước của hình ảnh, vì vậy không thể để trống không gian hợp lý cho nó. Điều này sẽ dẫn đến việc bố cục trang thay đổi trong quá trình tải (khi hình ảnh được tải).
Lưu ý:sử dụng height và width Thuộc tính thu nhỏ hình ảnh sẽ buộc người dùng tải hình ảnh lớn (dù trên trang có vẻ nhỏ). Để tránh trường hợp này, hãy sử dụng phần mềm xử lý hình ảnh để điều chỉnh kích thước hình ảnh trước khi sử dụng nó trên trang.
Ví dụ
Một hình ảnh có chiều cao 600 pixel và chiều rộng 500 pixel:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Cú pháp
<img height="pixels">
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| pixels | Định nghĩa chiều cao của hình ảnh bằng pixel (ví dụ height="100"). |
Các ví dụ khác
Thay đổi kích thước hình ảnh - Tạo hình ảnh lấp đầy
Thuộc tính height và width có một tính năng ẩn, đó là người dùng không cần phải chỉ định kích thước thực tế của hình ảnh,也就是说, hai giá trị này có thể lớn hơn hoặc nhỏ hơn kích thước thực tế. Trình duyệt sẽ tự động điều chỉnh hình ảnh để phù hợp với kích thước không gian được đặt trước. Sử dụng phương pháp này có thể dễ dàng tạo miniature cho hình ảnh lớn và phóng to hình ảnh nhỏ. Nhưng cần lưu ý rằng: trình duyệt vẫn phải tải toàn bộ tệp, bất kể kích thước cuối cùng hiển thị là bao lớn, và nếu không giữ nguyên tỷ lệ宽高, hình ảnh sẽ bị méo xệch.
Một kỹ thuật khác để sử dụng thuộc tính height và width là có thể dễ dàng lấp đầy khu vực trên trang, đồng thời cải thiện hiệu suất của tài liệu. Hãy tưởng tượng nếu bạn muốn đặt một dải màu ngang có màu trên tài liệu. Bạn không cần tạo một hình ảnh có kích thước đầy đủ, thay vào đó, bạn chỉ cần tạo một hình ảnh có độ rộng và chiều cao là 1 pixel, và gán cho nó màu bạn muốn sử dụng. Sau đó, sử dụng thuộc tính height và width để mở rộng kích thước lớn hơn.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Đây là hiệu ứng của đoạn mã HTML trên, dải màu này được tạo từ hình ảnh chỉ có một pixel:
Sử dụng giá trị phần trăm
Một kỹ thuật cuối cùng để sử dụng thuộc tính width là sử dụng giá trị phần trăm thay vì giá trị pixel tuyệt đối. Điều này sẽ làm cho trình duyệt phóng to hình ảnh theo tỷ lệ với cửa sổ hiển thị của trình duyệt. Do đó, nếu bạn muốn tạo một dải màu ngang có độ rộng bằng độ rộng của cửa sổ hiển thị và chiều cao là 30 pixel, bạn có thể thực hiện như sau:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Khi kích thước của cửa sổ tài liệu thay đổi, kích thước của hình ảnh này cũng sẽ thay đổi:
Lưu ý:Nếu cung cấp giá trị width dưới dạng phần trăm mà bỏ qua height, thì bất kể phóng to hay thu nhỏ, trình duyệt sẽ giữ nguyên tỷ lệ宽高 của hình ảnh. Điều này có nghĩa là tỷ lệ giữa chiều cao và chiều rộng của hình ảnh sẽ không thay đổi, và hình ảnh cũng sẽ không bị méo xệch.
Xin hãy xem mã HTML bên dưới:
<img src="/i/ct_1px.gif"} width="20%" />
Đ换句话说, nếu chỉ thiết lập giá trị phần trăm của thuộc tính width cho hình ảnh ct_1px.gif, bạn sẽ nhận được một hình ảnh vuông (đây là vì ct_1px.gif ban đầu là một hình vuông có độ rộng và độ cao là 1px):
Lưu ý:Mục đích của việc cung cấp ví dụ trên là để giúp bạn hiểu rõ hơn về cách sử dụng thuộc tính height và width. Nếu bạn chỉ cần một khối màu đơn色 lớn để trang trí trang, thì cách tốt hơn làSử dụng CSS để tạo màu nền.
Giải thích thuộc tính height và width
Tại sao lại sử dụng thuộc tính height và width
Bạn có thấy khi tài liệu tải, nội dung sẽ hiển thị không đều và di chuyển không? Nguyên nhân là vì trình duyệt liên tục điều chỉnh bố cục trang để có thể hiển thị mỗi hình ảnh được tải xuống. Trình duyệt tải xuống và phân tích độ rộng và độ cao của hình ảnh để quyết định kích thước của hình ảnh, sau đó để lại một không gian hình vuông tương ứng trong cửa sổ hiển thị. Sau đó, trình duyệt sẽ điều chỉnh bố cục hiển thị của trang để chèn hình ảnh vào trong. Điều này cũng cho chúng ta biết rằng hình ảnh là tệp độc lập, chúng được tải xuống riêng biệt với tệp nguồn.
Nhưng điều này không phải là phương pháp hiển thị tài liệu hiệu quả nhất, vì trình duyệt phải kiểm tra và tính toán không gian màn hình của mỗi tệp hình ảnh trước khi hiển thị nội dung liên tiếp và sau đó của tài liệu. Điều này có thể gây ra sự chậm trễ rất lớn trong việc hiển thị tài liệu, từ đó gián đoạn việc đọc của người dùng.
Đối với người sáng tạo, một phương pháp hiệu quả hơn là sử dụng thuộc tính height và width của thẻ <img> để chỉ định kích thước của hình ảnh. Như vậy, trình duyệt sẽ để trống vị trí cho hình ảnh trước khi tải hình ảnh, từ đó có thể tăng tốc độ hiển thị tài liệu và tránh sự di chuyển của nội dung tài liệu. Cả hai thuộc tính này đều yêu cầu là giá trị nguyên và được biểu thị bằng đơn vị pixel để chỉ định kích thước hình ảnh. Thứ tự xuất hiện của hai thuộc tính này trong thẻ <img> không quan trọng.
Vấn đề thuộc tính height và width
Mặc dù thuộc tính height và width của thẻ <img> có thể cải thiện hiệu suất và cho phép bạn thực hiện một số kỹ thuật nhỏ, nhưng khi sử dụng chúng vẫn có một số tác dụng phụ khó khăn. Dù người dùng đã tắt chức năng tự động tải xuống hình ảnh, trình duyệt vẫn phải hiển thị không gian được để trống cho hình ảnh với kích thước đã chỉ định. Điều này thường để lại cho người đọc một khung trống, trong đó có một biểu tượng vô nghĩa, biểu thị rằng đây là vị trí đặt hình ảnh. Lúc này trang web sẽ trông rất xấu, như thể chưa hoàn thành, và hầu hết nội dung đều không có giá trị. Nếu không sử dụng kích thước đã chỉ định, trình duyệt sẽ chỉ đặt biểu tượng hình ảnh trong văn bản, ít nhất vẫn còn một số văn bản có thể đọc được.
Về vấn đề này, chúng tôi vẫn chưa có giải pháp, chỉ có thể nhấn mạnh một điểm, đó là hãy sử dụng Thuộc tính alt vàVăn bản mô tảNhư vậy, người đọc ít nhất cũng biết điều gì đang thiếu ở đây. Chúng tôi vẫn khuyên bạn nên sử dụng các thuộc tính kích thước này, vì chúng tôi khuyến khích mọi hành vi cải thiện hiệu suất mạng.
Hỗ trợ trình duyệt
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |
