Thẻ HTML <img>
Thí dụ
Cách chèn hình ảnh:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Thêm các 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 một trang web về mặt kỹ thuật; hình ảnh được liên kết với các trang web. Thẻ <img>tạo không gian 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ị
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 trong 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 <img>thẻ vào bên 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 toàn cầu
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 .
Các ví dụ khác
Thí dụ
Căn chỉnh hình ảnh (với 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">
Thí dụ
Thêm đường viền hình ảnh (với CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="border:5px solid black">
Thí dụ
Thêm lề trái và lề phải vào hình ảnh (với CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:middle;margin:0px 50px">
Thí dụ
Thêm lề trên và lề dưới vào hình ảnh (với CSS):
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
Thí dụ
Cách chèn hình ảnh từ một thư mục khác hoặc từ một trang web khác:
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32"
height="32">
Thí dụ
Cách thêm siêu liên kết vào hình ảnh:
<a href="https://www.w3schools.com">
<img src="w3html.gif"
alt="W3Schools.com" width="100" height="132">
</a>
Thí dụ
Cách tạo bản đồ hình ảnh, với các vùng có thể nhấp. Mỗi vùng là một siêu kết nối:
<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>
Các 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ị <img>phần tử với các giá trị mặc định sau:
Thí dụ
img {
display: inline-block;
}