HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Thay đổi hình ảnh cực nhanh trong Responsive với thẻ picture

Chào các bạn.

Khi xây dựn g trang web Responsive, 1 số trường hợp cần thay đổi hình ảnh để phù hợp với từng chuẩn màn hình.

Thay vì chỉ sử dụng một hình ảnh, có thể dùng nhiều hình ảnh với các kích cỡ khác nhau để hiển thị khung hình đẹp hơn, nhưng việc hiện ẩn hình này phải dùng css rất mất thời gian.

Rất may, html5 cung cấp cho chúng ta 1 thẻ là <picture></picture>

 

Cặp thẻ này cho phép hiện ẩn hình ảnh theo từng kích thước màn hình, code trực tiếp, không cần thông qua css rườm rà.

Dưới đây là 1 ví dụ:

Khi thay đổi kích cỡ màn hình, hình ảnh sẽ thay đổi

Thẻ picture chứa hai loại thẻ khác nhau là một thẻ img và một hoặc nhiều thẻ source.

Thẻ source có các thuộc tính:

  • srcset (yêu cầu) – xác định URL của hình ảnh để hiển thị.
  • media – chấp nhận mọi truy vấn media hợp lệ thường được định nghĩa trong CSS.
  • sizes – xác định kích thước hình ảnh hiển thị.
  • type – định nghĩa kiểu file.

Trình duyệt sẽ sử dụng các giá trị thuộc tính để tải hình ảnh thích hợp nhất. Thẻ source đầu tiên phù hợp với thuộc tính sẽ được sử dụng.

Thẻ này quy ước theo chuẩn thiết kế Mobile first nhé. ( Mobile first là chuẩn Responsive bắt đầu từ thiết kế mobile với sự cân nhắc về các quy định và ràng buộc của giao diện này, và từ đó phát triển thành các màn hình lớn hơn).

Tải ví dụ ở đây

Xin cảm ơn.

Leave a comment