Thẻ <picture> HTML

Định nghĩa và cách sử dụng

<picture> Thẻ này làm cho nhà phát triển web linh hoạt hơn khi chỉ định tài nguyên hình ảnh.

<picture> Mục đích sử dụng phổ biến nhất của thẻ là hướng dẫn thiết kế tương tác. Bạn có thể thiết kế nhiều hình ảnh để lấp đầy viewport trình duyệt tốt hơn, thay vì để một hình ảnh theo tỷ lệ phóng to hoặc thu nhỏ dựa trên độ rộng viewport.

<picture> Thẻ chứa hai thẻ: một hoặc nhiều <source> thẻ và một <img> thẻ。

Trình duyệt sẽ tìm kiếm thẻ <source> đầu tiên khớp với điều tra độ rộng viewport hiện tại, sau đó nó sẽ hiển thị hình ảnh đúng (được chỉ định trong thuộc tính srcset). Thẻ <img> được sử dụng như <picture> Thẻ cuối cùng của thẻ là bắt buộc, được sử dụng làm tùy chọn dự phòng khi không có thẻ source nào khớp.

Lưu ý:<picture> Cách làm việc của thẻ <video> và <audio> Tương tự. Bạn có thể thiết lập nhiều nguồn khác nhau, nguồn đầu tiên phù hợp với tùy chọn đầu tiên sẽ được sử dụng.

Xem thêm:

HTML Hướng dẫn:HTML <picture> 元素

CSS Hướng dẫn:CSS 响应式设计 - Ảnh

实例

<picture> 标签的使用方法：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

亲自试一试

全局属性

<picture> 标签还支持 HTML 中的全局属性。

事件属性

<picture> 标签还支持 HTML 中的事件属性。

浏览器支持

表中的数字注明了首个完全支持该标签的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0