Thuộc tính width
Thuộc tính width thiết lập chiều rộng của hình ảnh,
được định nghĩa bởi thẻ
img.
Hiện tại, thuộc tính này chỉ được phép
sử dụng cho hình ảnh,
iframe,
video
và một số thẻ khác.
Cho phép chỉ định giá trị bằng pixel hoặc phần trăm. Trong trường hợp thiết lập kích thước bằng phần trăm, giá trị sẽ được tính từ chiều rộng của phần tử cha. Trong trường hợp thiết lập kích thước bằng pixel, không cần chỉ định đơn vị đo.
Nếu cho hình ảnh không được thiết lập cả chiều rộng, lẫn chiều cao - hình ảnh sẽ có kích thước thực của nó. Nếu thiết lập chiều cao - hình ảnh sẽ có chiều cao được chỉ định, còn chiều rộng sẽ tự điều chỉnh để tỷ lệ của nó không bị bóp méo. Nếu chỉ thiết lập chiều rộng - tương tự, hình ảnh sẽ tự điều chỉnh chiều cao để giữ nguyên tỷ lệ. Nếu thiết lập cả chiều rộng, lẫn chiều cao - tỷ lệ của hình ảnh có thể bị bóp méo (hoặc cũng có thể không, tùy bạn đoán đúng không). Nếu chiều rộng hoặc chiều cao (hoặc cả hai cùng lúc) lớn hơn kích thước thực - hình ảnh sẽ được phóng to, nhưng sẽ mất chất lượng.
Khuyến nghị thiết lập chiều rộng và chiều cao cho hình ảnh trong các thuộc tính - trong trường hợp này trình duyệt sẽ tải hình ảnh nhanh hơn - nó không cần phải tính toán kích thước của từng hình ảnh sau khi nhận được.
Không nên giảm kích thước thực
của hình ảnh một cách không cần thiết. Ví dụ,
kích thước thực của hình ảnh là 1000 x 1000
pixel, nhưng bạn lại đặt chiều rộng cho nó là 100px.
Trong trường hợp này, hình ảnh trên màn hình sẽ hiển thị
với kích thước 100 pixel, tuy nhiên lại có kích thước tệp
của cả nghìn pixel và do đó, tải lên
sẽ lâu hơn rất nhiều.
Xem ví dụ minh họa tại đây:
thẻ img.
