Thuộc tính width của thẻ <img> trong HTML
Định nghĩa và cách sử dụng
width Thuộc tính quy định chiều rộng của hình ảnh, bằng đơn vị pixel.
Lưu ý:Đặt thuộc tính cho hình ảnh height và width Thuộc tí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 không thể hiểu kích thước của hình ảnh, do đó không thể giữ lại không gian phù hợp, vì vậy khi hình ảnh được tải, bố cục của trang sẽ thay đổi. (Dưới đây là giải thích chi tiết về quan điểm này).
Lưu ý:Vui lòng không thông qua height và width Thuộc tính để phóng to hình ảnh. Nếu thông qua height và width Thuộc tính để thu nhỏ hình ảnh, người dùng phải tải xuống 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 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.
Ví dụ
Một hình ảnh có chiều rộng 500 pixel và chiều cao 600 pixel:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Cú pháp
<img width="pixels">
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| pixels | Định nghĩa chiều rộng hình ảnh bằng pixel (ví dụ: width="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à 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. Với phương pháp này, có thể dễ dàng tạo ra hình ảnh 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ệ chiều rộng và chiều 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 dải màu ngang có màu sắc 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 sắc bạn muốn sử dụng. Sau đó, sử dụng thuộc tính height và width để mở rộng nó đến 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 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 dải màu ngang có độ rộng bằng độ rộng 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 và bỏ qua height, thì bất kể phóng to hay thu nhỏ, trình duyệt sẽ duy trì tỷ lệ 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 hãy xem mã HTML bên dưới:
<img src="/i/ct_1px.gif"} width="20%" />
Đ esempio, 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 hình chữ nhật (vì ct_1px.gif ban đầu là một hình chữ nhật có chiều rộng và chiều cao là 1px):
Lưu ý:Mục đích của việc cung cấp các 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 tảng 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.
Giải thích chi tiết 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规律 không? Nguyên nhân là vì trình duyệt phải liên tục điều chỉnh布局 của trang để có thể hiển thị mỗi hình ảnh đã tải. Trình duyệt tải và phân tích chiều rộng và chiều cao của hình ảnh để quyết định kích thước của hình ảnh, sau đó sẽ để trống một khung hình tương ứng trong cửa sổ hiển thị. Sau đó, trình duyệt sẽ điều chỉnh布局 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, nó được tải riêng biệt với tệp nguồn.
Nhưng đâ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 gần đó và sau này. Đ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 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ự dịch 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 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 đề của 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 bạn vẫn có một số tác dụng phụ khó khăn. Mặc dù người dùng đã tắt chức năng tải xuống tự động hình ảnh, nhưng trình duyệt vẫn sẽ hiển thị không gian đã để trống cho hình ảnh theo 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, để chỉ ra 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ể nó 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ó 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à một sốVăn bản mô tảNhư vậy, người đọc ít nhất 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 động 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ợ |
