Thẻ HTML <img>
Ví dụ
Cách chèn hình ảnh:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thẻ <img> được sử dụng để nhúng hình ảnh vào trang HTML.
Hình ảnh không được chèn vào trang web về mặt kỹ thuật; hình ảnh được liên kết đến các trang web. Thẻ <img> tạo vùng lưu giữ cho hình ảnh được tham chiếu.
Thẻ <img> có hai thuộc tính bắt buộc:
- src - Chỉ định đường dẫn đến hình ảnh
- alt - Chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị được
Lưu ý: Ngoài ra, hãy luôn chỉ định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang có thể nhấp nháy khi tải hình ảnh.
Mẹo: Để liên kết hình ảnh với tài liệu khác, chỉ cần lồng thẻ <img> vào trong thẻ <a> (xem ví dụ bên dưới).
Hỗ trợ trình duyệt
| Element | |||||
|---|---|---|---|---|---|
| <img> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials |
Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy |
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
Thuộc tính chung
Thẻ <img> cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <img> cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Thêm ví dụ
Ví dụ
Căn chỉnh hình ảnh (bằng CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left"> Hãy tự mình thử »Ví dụ
Thêm viền ảnh (bằng CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="border:5px solid black">Hãy tự mình thử »Ví dụ
Thêm lề trái và lề phải vào hình ảnh (bằng CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:middle;margin:0px 50px">Hãy tự mình thử »Ví dụ
Thêm lề trên và dưới cho hình ảnh (bằng CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">Hãy tự mình thử »Ví dụ
Cách chèn hình ảnh từ thư mục khác hoặc từ trang web khác:
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.example.com.vn/images/lamp.jpg" alt="Lamp" width="32"
height="32"> Hãy tự mình thử »Ví dụ
Cách thêm siêu liên kết vào hình ảnh:
<a href="https://www.example.com.vn">
<img src="w3html.gif"
alt="W3Schools.com" width="100" height="132">
</a> Hãy tự mình thử »Ví dụ
Cách tạo bản đồ hình ảnh, với các vùng có thể nhấp vào. Mỗi vùng là một siêu liên kết:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect"
coords="34,44,270,350" alt="Computer" href="computer.htm">
<area
shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map> Hãy tự mình thử »Trang liên quan
Hướng dẫn HTML: Hình ảnh HTML
Tham chiếu DOM HTML: Đối tượng hình ảnh
Hướng dẫn CSS: Tạo kiểu cho hình ảnh
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <img> với các giá trị mặc định sau:
