Thẻ img

Thẻ img tạo ra một hình ảnh. Đường dẫn đến hình ảnh được chỉ định trong thuộc tính src. Không yêu cầu thẻ đóng.

Thuộc tính

Thuộc tính	Mô tả
src	Chỉ định đường dẫn đến hình ảnh. Thuộc tính bắt buộc.
alt	Văn bản thay thế sẽ được hiển thị thay cho hình ảnh, nếu nó không được tìm thấy (ví dụ: đường dẫn đến nó bị chỉ định sai). Thuộc tính bắt buộc. Nếu thiếu nó, trình kiểm tra hợp lệ (chương trình kiểm tra tính đúng đắn của HTML hoặc CSS) sẽ báo lỗi.
width	Chiều rộng của hình ảnh, tính bằng pixel (trong trường hợp này không cần chỉ định đơn vị đo) hoặc phần trăm so với phần tử cha của hình ảnh.
height	Chiều cao của hình ảnh, tính bằng pixel (trong trường hợp này không cần chỉ định đơn vị đo) hoặc phần trăm so với phần tử cha của hình ảnh.

Lưu ý

Nếu cho hình ảnh không chỉ định cả chiều rộng lẫn chiều cao - hình ảnh sẽ có kích thước thực tế của nó. Nếu chỉ định chiều cao - hình ảnh sẽ có chiều cao đã chỉ định, còn chiều rộng sẽ điều chỉnh sao cho tỷ lệ của nó không bị méo mó.

Nếu chỉ chỉ định chiều rộng - tương tự, hình ảnh sẽ điều chỉnh chiều cao sao cho giữ được tỷ lệ.

Nếu chỉ định cả chiều rộng lẫn chiều cao - tỷ lệ của hình ảnh có thể bị méo mó (hoặc có thể không, tùy thuộc vào bạn có đ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ẽ giảm chất lượng.

Nên chỉ định chiều rộng và chiều cao cho hình ảnh thông qua các thuộc tính (chứ không phải qua CSS) - 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 tế 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ẽ trông như có kích thước 100 pixel, nhưng thực tế lại có kích thước file đầy đủ một nghìn pixel và, do đó, thời gian tải sẽ lâu hơn nhiều.

Ví dụ

Hãy thêm một hình ảnh vào trang web và không chỉ định các thuộc tính height và width. Hình ảnh sẽ có kích thước thực tế của nó:

:

Ví dụ

Hãy thử thêm chiều rộng cho hình ảnh bằng thuộc tính width, chiều cao khi đó sẽ tự động điều chỉnh để giữ nguyên tỷ lệ của hình ảnh:

:

Ví dụ

Và bây giờ hãy thêm chiều cao cho hình ảnh bằng thuộc tính height, chiều rộng khi đó sẽ điều chỉnh để giữ nguyên tỷ lệ của hình ảnh:

:

Ví dụ

Hãy đồng thời thêm cả chiều cao, lẫn chiều rộng cho hình ảnh. Tỷ lệ của hình ảnh khi đó sẽ bị méo mó (không nhất thiết, nhưng trong trường hợp này chiều cao và chiều rộng được chọn sao cho tỷ lệ bị méo):

:

Ví dụ

Hãy đặt đường dẫn sai đến hình ảnh (để đơn giản, chúng ta sẽ để trống). Thay vì hình ảnh, chúng ta sẽ thấy nội dung của thuộc tính alt (có vẻ như đó là văn bản thông thường - nhưng hãy thử sao chép nó - bạn sẽ không làm được gì đâu, nó sẽ được kéo như một hình ảnh):

:

Xem thêm