Cách thiết lập ảnh reponsive khi viết script lấy dữ liệu nguồn cấp

Cách thiết lập ảnh reponsive khi viết script lấy dữ liệu nguồn cấp

Hình ảnh reponsive là hình ảnh hiển thị tốt và tự động co giãn trên các thiết bị có độ phân giải màn hình khác nhau. Ngoài ra kích thước ảnh được đặt theo kích thước màn hình khi tải trang. Các bạn xem ví dụ về ảnh + Không sử dụng srcset + Sử dụng srcset Sự khác biệt dễ dàng nhận thấy giữa sử dụng và không sử dụng srcset chính là kích thước rộng và cao của ảnh, lấy ví dụ như ảnh trên có kích thước ảnh gốc cao 418px rộng 660px + Nếu không sử dụng srcset khi tải ở kích thước màn hình nào cũng phải tải kích thước ảnh gốc dẫn đến kích thước của trang nặng hơn và ảnh bắt buộc phải sử dụng css trong @media screen and (max-width: px) + Nếu sử dụng srcset: ảnh sẽ tự động căn chỉnh kích thước giảm dần đáp ứng cụ thể với kích thước màn hình do đó kích thước của trang sẽ nhẹ hơn do kích thước của ảnh giảm và không cần sử dụng đến @media screen and (max-width: px) Cụ thể hơn khi sử dụng srcset bạn chỉ cần viết css đơn giản: Copy .post_thumb {     width: 100%;     height: auto; } .post_thumb img {     width: 10…