Thẻ HTML <picture>
Thí dụ
Cách sử dụng thẻ <picture>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Định nghĩa và Cách sử dụng
Thẻ <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.
Việc sử dụng phổ biến nhất của <picture>phần tử sẽ là hướng nghệ thuật trong các thiết kế đáp ứng. Thay vì có một hình ảnh được tăng hoặc giảm tỷ lệ dựa trên chiều rộng khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn.
Phần <picture>tử chứa hai thẻ: một hoặc nhiều
thẻ <source> và một thẻ <img> .
Trình duyệt sẽ tìm kiếm phần tử <source> đầu tiên nơi truy vấn phương tiện phù hợp với chiều rộng khung nhìn hiện tại, sau đó nó sẽ hiển thị hình ảnh thích hợp (được chỉ định trong thuộc tính srcset). Phần tử <img> được yêu cầu làm phần tử con cuối cùng của <picture>phần tử, như một tùy chọn dự phòng nếu không có thẻ nguồn nào phù hợp.
Mẹo: Phần <picture>tử hoạt động "tương tự" với <video> và <audio>. Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với sở thích là nguồn đang được sử dụng.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Thuộc tính toàn cầu
Thẻ <picture>cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <picture>cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các trang liên quan
Hướng dẫn HTML: Phần tử <picture> HTML
Hướng dẫn CSS: Thiết kế đáp ứng CSS - Hình ảnh