Thẻ HTML

Định nghĩa và cách sử dụng thẻ <picture>

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. Đây là ví dụ về 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>

Việc sử dụng phần tử <picture> phổ biến nhất sẽ là định 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 trình duyệt đẹp hơn.

Phần tử <picture> 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 trong đó truy vấn phương tiện phù hợp với chiều rộng khung nhìn hiện tại và sau đó nó sẽ hiển thị hình ảnh phù hợp (được chỉ định trong thuộc tính srcset). Phần tử <img> được yêu cầu là phần tử con cuối cùng của phần tử <picture>, làm tùy chọn dự phòng nếu không có thẻ source nào khớp.

Mẹo: Phần tử <picture> 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ử.

Thuộc tính Global

Thẻ <picture> cũng hỗ trợ thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <picture> cũng hỗ trợ thuộc tính sự kiện trong HTML.