Hình ảnh đáp ứng bằng cách sử dụng `srcset`

Cách sử dụng thuộc tính srcset thẻ HTML img để xác định hình ảnh đáp ứng

Cácsrcsetthuộc tính củaimgcho phép bạn đặt hình ảnh đáp ứng mà trình duyệt có thể sử dụng tùy thuộc vào mật độ pixel hoặc chiều rộng cửa sổ, theo sở thích của bạn. Bằng cách này, nó chỉ có thể tải xuống các tài nguyên mà nó cần để hiển thị trang, mà không tải xuống hình ảnh lớn hơn nếu nó trên thiết bị di động, chẳng hạn.

Đây là một ví dụ, trong đó chúng tôi cung cấp 4 hình ảnh bổ sung cho 4 kích thước màn hình khác nhau:

<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

bên trongsrcsetchúng tôi sử dụngwđo để chỉ ra chiều rộng cửa sổ.

Vì chúng tôi làm như vậy, chúng tôi cũng cần sử dụngsizesthuộc tính:

<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

Trong ví dụ này,(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxchuỗi trongsizesthuộc tính mô tả kích thước của hình ảnh liên quan đến chế độ xem, với nhiều điều kiện được phân tách bằng dấu phẩy.

Điều kiện phương tiệnmax-width: 500pxđặt kích thước của hình ảnh tương quan với chiều rộng khung nhìn. Tóm lại, nếu kích thước cửa sổ là <500px, nó sẽ hiển thị hình ảnh ở 100% kích thước cửa sổ.

Nếu kích thước cửa sổ lớn hơn nhưng <900px, nó hiển thị hình ảnh ở 50% kích thước cửa sổ.

Và nếu lớn hơn nữa, nó sẽ hiển thị hình ảnh ở 800px.

Cácvw unit of measure can be new to you, and in short we can say that 1 vwlà 1% chiều rộng cửa sổ, vì vậy100vwlà 100% chiều rộng cửa sổ.

Một trang web hữu ích để tạosrcsetvà hình ảnh nhỏ dần làhttps://responsivebreakpoints.com/.

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


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