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
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
Cách khóa trang cá nhân Facebook không cho người lạ xem
Hôm qua 2 -
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
6 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
3 cách cố định hình ảnh trong Word, khóa di chuyển để không làm ảnh hưởng bố cục
Hôm qua