Thẻ HTML `ảnh`

Khám phá những điều cơ bản về cách làm việc với hình ảnh và HTMLpicturevà cách làm cho chúng phản hồi

HTML cung cấp cho chúng tôipicture, thực hiện một công việc rất giống vớisrcsetthuộc tính của mộtimgvà sự khác biệt là rất nhỏ.

Bạn dùngpicturekhi thay vì chỉ cung cấp phiên bản nhỏ hơn của tệp, bạn hoàn toàn muốn thay đổi nó. Hoặc phân phát một định dạng hình ảnh khác.

Trường hợp sử dụng tốt nhất mà tôi tìm thấy là khi cung cấp hình ảnh WebP, đây là định dạng vẫn chưa được hỗ trợ rộng rãi. bên trongpicturebạn chỉ định danh sách các hình ảnh và chúng sẽ được sử dụng theo thứ tự, vì vậy trong ví dụ tiếp theo, các trình duyệt hỗ trợ WebP sẽ sử dụng hình ảnh đầu tiên và dự phòng cho JPG nếu không:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

Cácsourcethẻ xác định một (hoặc nhiều) định dạng cho hình ảnh. Cácimglà thẻ dự phòng trong trường hợp trình duyệt rất cũ và không hỗ trợpicturenhãn.

bên trongsourcegắn thẻ bên trongpicturebạn có thể thêm mộtmediathuộc tính để đặt các truy vấn phương tiện.

Ví dụ sau loại công việc như ví dụ trên vớisrcset:

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

Nhưng đó không phải là trường hợp sử dụng của nó, vì như bạn có thể thấy nó dài dòng hơn nhiều.

Cácpicturethẻ là gần đây nhưng bây giờ làđược hỗ trợbởi tất cả các trình duyệt chính ngoại trừ Opera Mini và IE (tất cả các phiên bản).

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác: