Thẻ picture trong HTML

• Bùi Tấn Lực
• 22
• 29/09/2025

Thẻ picture trong HTML dùng để sử dụng nhiều hình ảnh khác nhau ở các khoảng chiều rộng của trình duyệt khác nhau, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ picture trong HTML

Chức năng của Thẻ picture trong HTML

Thẻ picture trong HTML dùng để sử dụng nhiều hình ảnh khác nhau ở các khoảng chiều rộng của trình duyệt khác nhau, thẻ bao gồm thẻ img và các thẻ source.

Code Thẻ picture trong HTML

<p>Kéo trình duyệt nhỏ lại để xem hình ảnh thay đổi, chổ min-width bạn thay đổi khi làm thực tế</p>
<picture>
  <!--Từ 650px trở lên sử dụng hình này-->
  <source media="(min-width:650px)" srcset="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg">
  <!--Từ 465px đến dưới 650px trở lên sử dụng hình này-->
  <source media="(min-width:465px)" srcset="https://webmoi.vn/thumuc/sach-lam-chu-van-menh-cua-ban.jpg">
  <!--Dưới 465px sử dụng hình này-->
  <img src="https://webmoi.vn/upload/tinblog/the-picture-trong-html.jpg" alt="Thẻ picture trong HTML" style="width:100%;height:auto">
</picture>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ picture trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ picture trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn