Thẻ HTML <picture>
Đị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ử.
Phần tử <picture> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
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.
Bạn nên đọc


Cũ vẫn chất
-
Cách chỉnh cấu hình trong Mini World Block Art
Hôm qua -
Cách thay đổi DNS Server trên Windows 11
Hôm qua -
Cách sửa lỗi BSOD Memory Management
Hôm qua 1 -
40+ câu nói ‘xoắn lưỡi’ tiếng Việt, Anh, thách bạn có thể nói nhanh liên tiếp 5 lần mà vẫn trôi chảy
Hôm qua -
5 mẹo xem lịch sử máy tính trên iPhone
Hôm qua -
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
Lịch phát sóng VTV1 hôm nay 07/02/2025
Hôm qua -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
Nhận xúc xắc Piggy Go mới nhất, Spin Piggy Go mới nhất
Hôm qua 3