HTML/CSS | Thẻ img

Học HTML, CSS từ Zero Tới Hero

• Giới thiệu thẻ img
• Thuộc tính src
• Thuộc tính width, height
• 1. Giới thiệu thuộc tính width, height
• 2. Tránh không chỉ định width, height
• 3. Tránh đặt width, height sai tỉ lệ ảnh

Giới thiệu thẻ img

Thẻ <img> (image - hình ảnh) được dùng để hiển thị hình ảnh trên trang web. Đây là một thẻ tự đóng (self-closing tag);

Cách sử dụng:

Chúng ta sẽ tìm hiểu về các thuộc tính được nhắc tới trong ví dụ trên:

• src (bắt buộc)
• alt (bắt buộc)
• width và height

Thuộc tính src

Thuộc tính src (source - nguồn) được dùng để xác định đường dẫn (URL, path) của hình ảnh sẽ được hiển thị.

Ví dụ:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLrcmQlN7ruaaYI2CfUZQlF9mLYyAmA94t3dWBLVl7CEtyK-Ynm7TDgL4LTCFkvotehiwL1_z4xajyE96W33lEL_LloP6vCSh6juouKTPqkUENq37ij8a8OclrC9Bmo6pWYqEWg_3EY3btWR67Of82l-Q4AvTR20KeWkUjbjiafIvJnuQo6GzzJ_mH_M/s1600/cpu.webp
" />

Lưu ý, thẻ <img> không thực sự chèn hình ảnh vào trang web. Thẻ <img> tạo ra một không gian để hiển thị hình ảnh trong trang web, hình ảnh sẽ được tải từ đường dẫn trong src.

Vì vậy, hình ảnh trên trang web có thể bị lỗi khi:

• Hình ảnh không tồn tại (bị xóa, gõ sai URL, v.v)
• Lỗi kết nối mạng, không thể tải được hình ảnh.

Thuộc tính width, height

1. Giới thiệu thuộc tính width, height

Thuộc tính width và height dùng để chỉ định kích thước hiển thị của hình ảnh.

Ví dụ:

Hình ảnh được hiển thị với kích thước được chỉ định tại thuộc tính width và height (CSS cũng có thể làm điều tương tự). Nếu width và height không được chỉ định, hình ảnh sẽ hiển thị với kích thước gốc.

2. Tránh không chỉ định width, height

Bạn nên tránh không chỉ định width và height cho hình ảnh vì điều này có thể gây ra một số vấn đề sau:

• Trình duyệt không thể biết được kích thước của hình ảnh trong khi tải, dẫn tới nội dung trang web có thể bị nhảy/giật sau khi hình ảnh được hiển thị.
• Người dùng có thể nhấn vào một liên kết ngoài ý muốn, nếu đúng lúc nhấn thì một hình ảnh được hiển thị khiến nội dung bị đẩy xuống một đoạn.

Ví dụ:

khi hình ảnh được đặt width, height:

3. Tránh đặt width, height sai tỉ lệ ảnh

Nếu đặt width, height sai tỉ lệ ảnh gốc có thể làm ảnh hiển thị bị méo, lỗi.

Ví dụ:

Kích thước gốc của ảnh là 128 x 128 có tỉ lệ là 1 (128 / 128 = 1). Quan trọng là bạn sử dụng đúng tỉ lệ ảnh gốc thì ảnh sẽ không bao giờ bị méo. Ví dụ, hình ảnh trên có thể hiển thị tốt ở 100 x 100, 60 x 60, v.v.

Hiển thị ở 100 x 100 và 60 x 60:

<img
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLrcmQlN7ruaaYI2CfUZQlF9mLYyAmA94t3dWBLVl7CEtyK-Ynm7TDgL4LTCFkvotehiwL1_z4xajyE96W33lEL_LloP6vCSh6juouKTPqkUENq37ij8a8OclrC9Bmo6pWYqEWg_3EY3btWR67Of82l-Q4AvTR20KeWkUjbjiafIvJnuQo6GzzJ_mH_M/s1600/cpu.webp"
    width="100"
    height="100"
/>
<img
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLrcmQlN7ruaaYI2CfUZQlF9mLYyAmA94t3dWBLVl7CEtyK-Ynm7TDgL4LTCFkvotehiwL1_z4xajyE96W33lEL_LloP6vCSh6juouKTPqkUENq37ij8a8OclrC9Bmo6pWYqEWg_3EY3btWR67Of82l-Q4AvTR20KeWkUjbjiafIvJnuQo6GzzJ_mH_M/s1600/cpu.webp"
    width="60"
    height="60"
/>

Lưu ý: Mặc dù giữ đúng tỉ lệ là được, nhưng bạn tránh đặt kích thước hiển thị lớn hơn kích thước hình ảnh gốc. Điều này giống như việc bạn cố gắng phóng to (zoom) một hình ảnh nhỏ lên vậy, ảnh sẽ bị vỡ (bể).

Hiển thị lớn hơn kích thước gốc:

Trên đây là một số tình huống giúp bạn biết cách sử dụng hình ảnh tốt hơn. Trong các chương sau của khóa học này, bạn vẫn sẽ được tìm hiểu thêm các phương pháp và kỹ thuật nâng cao hơn khi làm việc với hình ảnh.

Tóm tắt

• Thẻ <img> (image - hình ảnh) được dùng để hiển thị hình ảnh trên trang web, thẻ có thuộc tính src và alt là bắt buộc.
• Thuộc tính src (source - nguồn) được dùng để xác định đường dẫn (URL, path) của hình ảnh sẽ được hiển thị.
• Thẻ <img> không thực sự chèn hình ảnh vào trang web. Thẻ <img> tạo ra một không gian để hiển thị hình ảnh trong trang web, hình ảnh sẽ được tải từ đường dẫn trong src.
• Thuộc tính width và height dùng để chỉ định kích thước hiển thị của hình ảnh. Nếu không được chỉ định, hình ảnh sẽ hiển thị với kích thước gốc.
• Tránh không đặt width và height cho hình ảnh vì có thể gây ra hiện tượng nhảy/giật trên trang web.
• Tránh đặt width, height sai tỉ lệ ảnh gốc vì có thể làm ảnh hiển thị bị méo, lỗi.
• Tránh đặt width, height lớn hơn kích thước gốc của ảnh vì có thể làm ảnh hiển thị bị vỡ.