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
-
PhD, MD, MA, MSc, BA, BSc có nghĩa là gì?
Hôm qua -
12 giờ trưa là AM hay PM trong tiếng Anh?
Hôm qua 1 -
Cách định dạng ngày tháng trong Excel
Hôm qua -
‘Để giành’ hay ‘để dành’, ‘dành cho’ hay ‘giành cho’, cách viết nào đúng chính tả?
Hôm qua -
Cách chụp màn hình iPhone dễ nhất, cho mọi dòng iPhone
Hôm qua -
Cách tính điểm thi vào lớp 10 năm 2025
Hôm qua -
Cách tải Office 365 miễn phí trọn đời, tự gia hạn
Hôm qua 8 -
Đáp án Thử Tài Lịch Sử Liên Quân FULL các đáp án, gợi ý
Hôm qua 21 -
Bảng mã màu CSS, code color chuẩn trong thiết kế website
Hôm qua 1 -
8 cách kiểm tra ổ cứng hiệu quả giúp khám sức khỏe định kỳ của ổ cứng
Hôm qua