Phần tử <picture> HTML
Phần tử HTML <picture>cho phép bạn hiển thị các hình ảnh khác nhau cho các thiết bị hoặc kích thước màn hình khác nhau.
Phần tử <picture> HTML
Phần tử HTML <picture>giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh.
Phần <picture>tử chứa một hoặc nhiều <source>phần tử, mỗi phần tử đề cập đến các hình ảnh khác nhau thông qua srcset
thuộc tính. Bằng cách này, trình duyệt có thể chọn hình ảnh phù hợp nhất với chế độ xem và / hoặc thiết bị hiện tại.
Mỗi <source>phần tử có một
mediathuộc tính xác định thời điểm hình ảnh phù hợp nhất.
Thí dụ
Hiển thị các hình ảnh khác nhau cho các kích thước màn hình khác nhau:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Lưu ý: Luôn chỉ định một <img>phần tử là phần tử con cuối cùng của <picture>phần tử. Phần <img>tử được sử dụng bởi các trình duyệt không hỗ trợ <picture>phần tử hoặc nếu không có <source>thẻ nào phù hợp.
Khi nào sử dụng phần tử hình ảnh
Có hai mục đích chính cho <picture>phần tử:
1. Băng thông
Nếu bạn có màn hình hoặc thiết bị nhỏ, không nhất thiết phải tải tệp hình ảnh lớn. Trình duyệt sẽ sử dụng <source>
phần tử đầu tiên có các giá trị thuộc tính phù hợp và bỏ qua bất kỳ phần tử nào sau đây.
2. Hỗ trợ định dạng
Một số trình duyệt hoặc thiết bị có thể không hỗ trợ tất cả các định dạng hình ảnh. Bằng cách sử dụng
<picture>phần tử, bạn có thể thêm hình ảnh của tất cả các định dạng và trình duyệt sẽ sử dụng định dạng đầu tiên mà nó nhận ra và bỏ qua bất kỳ phần tử nào sau đây.
Thí dụ
Trình duyệt sẽ sử dụng định dạng hình ảnh đầu tiên mà nó nhận dạng được:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Lưu ý: Trình duyệt sẽ sử dụng <source>phần tử đầu tiên có các giá trị thuộc tính phù hợp và bỏ qua bất kỳ <source>phần tử nào sau đây.
Thẻ hình ảnh HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .