1. Sử dụng thuộc tính width

Nếu thuộc tính width được đặt thành phần trăm và thuộc tính height được đặt thành “auto”, thì hình ảnh sẽ phản hồi và mở rộng quy mô lên và xuống

Ví dụ:

Lưu ý rằng trong ví dụ trên, hình ảnh có thể được thu nhỏ để lớn hơn kích thước ban đầu của nó. Trong nhiều trường hợp, giải pháp tốt hơn sẽ là sử dụng thuộc tính max-width

2. Sử dụng thuộc tính max-width

Nếu thuộc tính max-width được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ nếu phải giảm, nhưng không bao giờ tăng tỷ lệ để lớn hơn kích thước ban đầu

Ví dụ:

3. Hình ảnh khác nhau cho các thiết bị khác nhau

Một hình ảnh lớn có thể hoàn hảo trên màn hình máy tính lớn, nhưng vô dụng trên một thiết bị nhỏ. Tại sao phải tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó? Để giảm tải hoặc vì bất kỳ lý do nào khác, bạn có thể sử dụng truy vấn phương tiện để hiển thị các hình ảnh khác nhau trên các thiết bị khác nhau

Bạn có thể sử dụng truy vấn phương tiện min-device-width, thay vì min-width để kiểm tra chiều rộng thiết bị, thay vì chiều rộng trình duyệt. Sau đó, hình ảnh sẽ không thay đổi khi bạn thay đổi kích thước cửa sổ trình duyệt

Ví dụ:

4. Phần tử <picture> trong HTML

Phần tử HTML <picture> giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh.

Việc sử dụng phổ biến nhất của phần tử <picture> sẽ dành cho các hình ảnh được sử dụng trong các thiết kế đáp ứng. Thay vì có một hình ảnh được phóng to hoặc thu nhỏ dựa trên chiều rộng khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn.

Phần tử <picture> hoạt động tương tự như phần tử <video> và <audio>. Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với tùy chọn là nguồn đang được sử dụng

Ví dụ:

Thuộc tính srcset là bắt buộc và xác định nguồn của hình ảnh

Thuộc tính media là tùy chọn và chấp nhận các truy vấn media mà bạn tìm thấy trong quy tắc CSS @media

Bạn cũng nên xác định phần tử <img> cho các trình duyệt không hỗ trợ phần tử <picture>