Thuộc tính height và width của thẻ <img> trong HTML
Mô hình
Thiết lập chiều rộng và chiều cao của hình ảnh riêng biệt là 200 pixel:
<img src="/i/mouse.jpg" height="200" width="200" />
Định nghĩa và cách sử dụng
Thuộc tính height và width của thẻ <img> thiết lập kích thước của hình ảnh.
Lưu ý:Việc chỉ định thuộc tính height và width cho hình ảnh là một thói quen tốt. Nếu đã thiết lập các thuộc tính này, có thể để lại không gian cho hình ảnh khi trang được tả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, do đó không thể giữ lại không gian phù hợp, và khi hình ảnh được tải, bố cục của trang sẽ thay đổi. (Dưới đây sẽ giải thích kỹ hơn về quan điểm này).
Lưu ý:Hãy không sử dụng thuộc tính height và width để thu phóng hình ảnh. Nếu thu phóng hình ảnh bằng thuộc tính height và width, người dùng sẽ phải tải hình ảnh có dung lượng lớn (dù hình ảnh trên trang trông rất nhỏ). Cách đúng đắn hơn là, trước khi sử dụng hình ảnh trên trang web, nên xử lý hình ảnh thành kích thước phù hợp bằng phần mềm.
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 đặc tính ẩn là 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 dự trữ. Với phương pháp này, có thể dễ dàng tạo bản thu nhỏ cho hình ảnh lớn và phóng to hình ảnh nhỏ. Tuy nhiên, 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ệ rộng và cao ban đầu, hình ảnh sẽ bị méo xệch.
Một kỹ thuật khác của 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 thanh ngang màu trong 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 đó 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 HTML trên, thanh 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 của 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 thu phóng hình ảnh theo tỷ lệ với cửa sổ hiển thị của trình duyệt. Do đó, nếu muốn tạo một thanh ngang màu có độ rộng bằng độ rộng của cửa sổ hiển thị và chiều cao là 30 pixel, 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 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ì vậy hình ảnh sẽ không bị méo xệch.
Xin xem HTML dưới đây:
<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 (vì ct_1px.gif ban đầu là một hình vuông chỉ có chiều rộng và chiều cao là 1px):
Lưu ý:Bạn có thể thử trong công cụ kiểm tra trực tuyến của chúng tôiThử ngay lập tức!
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 sắc lớn để trang trí trang web, thì cách tốt hơn làSử dụng CSS để tạo màu nền.
Hỗ trợ trình duyệt
Tất cả các trình duyệt đều hỗ trợ thuộc tính height và width.
Cú pháp
<img height="value" />
hoặc:
<img width="value" />
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| pixels | Giá trị chiều cao hoặc chiều rộng tính theo đơn vị pixel. |
| percent | Giá trị chiều cao hoặc chiều rộng tính theo phần trăm của yếu tố bao gồm. |
TIY (Try It Yourself)
- Điều chỉnh kích thước hình ảnh
- Ví dụ này minh họa cách điều chỉnh kích thước của hình ảnh.
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 của nó 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布局 của trang để có thể hiển thị mỗi hình ảnh được tải. Trình duyệt tải 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 đó để trống 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 layout 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 và chúng được tải 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 tài liệu tiếp theo và sau đó. Đ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à thông qua việc 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 nó xuống, 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ố mẹo nhỏ, nhưng vẫn có một số tác dụng phụ khó khăn khi sử dụng chúng. Mặc dù người dùng đã tắt chức năng tải xuống tự động hình ảnh, trình duyệt vẫn sẽ hiển thị không gian đã dự trữ cho hình ảnh với kích thước đã chỉ định. Thường thì điều này để 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ị vị trí đặt hình ảnh. Lúc này trang web sẽ trông rất xấu, như 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 người đọc vẫn có thể đọc được một số văn bản.
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 altvà một sốVăn bản mô tảVậy người đọc ít nhất cũng biết điều gì đang thiếu. 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.
