Hình ảnh phản hồi là hình ảnh có thể tự thích ứng với các thiết bị khác nhau, bất kể kích thước màn hình. Ngày nay, việc có một hình ảnh phản hồi trên trang web đã trở nên rất quan trọng. Vì nó không chỉ tăng tốc trang web mà còn mang lại trải nghiệm người dùng thú vị trên tất cả các thiết bị. Hình ảnh đáp ứng cũng sẽ được thay đổi kích thước bằng cách thay đổi kích thước trình duyệt.
Hình ảnh đáp ứng thích ứng hiệu quả với các kích thước màn hình khác nhau trên các thiết bị khác nhau. Nó đảm bảo rằng chất lượng được duy trì. Một trang web đáp ứng với hình ảnh đáp ứng chắc chắn sẽ tăng tỷ lệ tương tác và chuyển đổi. Hình ảnh có thể được phản hồi bằng CSS cùng với truy vấn phương tiện.
Bài viết này sẽ sử dụng HTML và CSS để làm cho hình ảnh phản hồi nhanh.
Làm cách nào để tạo hình ảnh phản hồi nhanh bằng HTML và CSS?
Để làm cho hình ảnh phản hồi nhanh bằng HTML và CSS, hãy thực hiện các bước dưới đây:
Cách 1: Sử dụng thuộc tính “max-width”
Phương pháp đầu tiên để làm cho hình ảnh phản hồi nhanh là sử dụng “ chiều rộng tối đa ' tài sản. Các ' chiều rộng tối đa Thuộc tính ” được sử dụng để xác định chiều rộng tối đa của hình ảnh. Trong trường hợp nội dung vượt quá chiều rộng tối đa, nó sẽ thay đổi chiều cao của phần tử.
Tạo HTML
Để thêm tệp hình ảnh vào thẻ
của HTML, người dùng cần sử dụng thẻThêm CSS
Bây giờ, hãy tạo một tệp CSS bên ngoài, lưu nó với phần mở rộng “. css ” và liên kết nó bên trong thẻ
của tệp HTML. Để định kiểu tệp hình ảnh trong tệp CSS, hãy bắt đầu bằng thẻ img và mở dấu ngoặc nhọn. Sau đó, bên trong dấu ngoặc nhọn, thêm “ chiều rộng tối đa: 100% ;” để vừa với hình ảnh theo chiều ngang trong vùng chứa. Hơn nữa, nó sẽ ngăn hình ảnh bị cắt. Sau đó, thêm “ chiều cao: tự động ;” để tự động điều chỉnh độ cao để hình ảnh được hiển thị chính xác:hình ảnh {
chiều rộng tối đa : 100% ;
chiều cao : tự động ;
}
Thay đổi kích thước cửa sổ trình duyệt để kiểm tra tỷ lệ hình ảnh.
Cách 2: Sử dụng thuộc tính “width”
Một phương pháp khác để làm cho hình ảnh phản hồi nhanh là sử dụng thuộc tính “ chiều rộng ”. Bất động sản ' chiều rộng ” xác định chiều rộng cho hình ảnh và văn bản. Nó không chứa lề, phần đệm hoặc đường viền. Nó có thể đặt kích thước của hình ảnh và văn bản ở dạng cm, px hoặc%. Để làm cho hình ảnh phản hồi nhanh, chỉ cần gán “ chiều rộng ” tài sản cho “ 100 %”. Cài đặt ' chiều rộng: 100% ;” có nghĩa là làm cho hình ảnh lớn bằng phần tử gốc:
hình ảnh {chiều rộng : 100% ;
chiều cao : tự động ; }
Những điều trên xác nhận rằng hình ảnh đáp ứng. Để kiểm tra xem nó có phản hồi hay không, chỉ cần thay đổi kích thước cửa sổ trình duyệt.
Phương pháp 3: Áp dụng truy vấn phương tiện
Truy vấn phương tiện CSS giúp người dùng sửa đổi giao diện của trang web. Truy vấn phương tiện CSS chứa các điều kiện, bất cứ khi nào các điều kiện này đáp ứng, nó sẽ thay đổi giao diện của thiết bị hoặc trình duyệt. Truy vấn phương tiện cũng có thể giúp người dùng tạo ra hình ảnh phản hồi nhanh. Vì lý do đó, trước tiên, hãy chỉ định “@ phương tiện truyền thông ” rồi chỉ định thẻ “ chiều rộng tối đa ” và chỉ định chiều rộng tối đa cho hình ảnh trong dấu ngoặc nhọn. Bất cứ khi nào điều kiện này đáp ứng, hình ảnh sẽ phản hồi. Sau đó, thêm dấu ngoặc nhọn chỉ định thẻ img và chỉ định “ chiều rộng: 100% ;” giá trị:
@phương tiện truyền thông ( chiều rộng tối đa : 480px ) {hình ảnh {
chiều rộng : 100% ;
}
}
Ghi chú : hình ảnh sẽ chỉ phản hồi nếu đáp ứng điều kiện đã chỉ định.
Truy vấn phương tiện CSS đã được áp dụng và bây giờ hình ảnh sẽ hoạt động phản hồi nếu được thay đổi kích thước theo kích thước hình ảnh được chỉ định. Nếu không, nó sẽ không phản hồi:
Phần kết luận
Để làm cho hình ảnh phản hồi nhanh với HTML và CSS, người dùng có nhiều phương pháp khác nhau. Những phương pháp này bao gồm làm cho hình ảnh phản hồi nhanh bằng cách sử dụng “ chiều rộng tối đa ' tài sản, ' chiều rộng ” và cũng bằng cách áp dụng truy vấn phương tiện CSS. Bài viết này đã giới thiệu cho người dùng giải pháp hoàn chỉnh để làm cho hình ảnh có tính phản hồi cao.