Phần tử <hình ảnh> 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ử <hình ảnh> 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 tử <picture> chứa một hoặc nhiều phần tử <source> , mỗi phần tử đề cập đến các hình ảnh khác nhau thông qua thuộc tính srcset . 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 phần tử <source> có một thuộc tính media xác định thời điểm hình ảnh phù hợp nhất.
Ví 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> Hãy tự mình thử » Lưu ý: Luôn chỉ định phần tử <img> là phần tử con cuối cùng của phần tử <picture> . Phần tử <img> được sử dụng bởi các trình duyệt không hỗ trợ phần tử <picture> hoặc nếu không có thẻ <source> nào khớp.
Khi nào nên sử dụng Picture Element
Có hai mục đích chính cho phần tử <picture> :
1. Băng thông
Nếu bạn có màn hình hoặc thiết bị nhỏ thì không cần thiết phải tải tệp hình ảnh lớn. Trình duyệt sẽ sử dụng phần tử <source> đầu tiên 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 phần tử <picture> , bạn có thể thêm hình ảnh ở 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.
Ví dụ
Trình duyệt sẽ sử dụng định dạng hình ảnh đầu tiên mà nó nhận ra:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture> Hãy tự mình thử » Lưu ý: Trình duyệt sẽ sử dụng phần tử <source> đầu tiên có giá trị thuộc tính phù hợp và bỏ qua mọi phần tử <source> sau.
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.
