Cách thực hiện - Hình ảnh phản hồi
Tìm hiểu cách tạo hình ảnh phản hồi bằng CSS.
Hình ảnh đáp ứng sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình.
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi:
Cách tạo hình ảnh phản hồi
Bước 1) Thêm HTML:
Ví dụ
<img src="nature.jpg" alt="Nature" class="responsive">
Bước 2) Thêm CSS:
Nếu bạn muốn hình ảnh tăng hoặc giảm tỷ lệ theo khả năng phản hồi, hãy đặt thuộc tính CSS width
thành 100% và height
thành tự động:
Nếu bạn muốn một hình ảnh thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ lên lớn hơn kích thước ban đầu của nó, hãy sử dụng max-width: 100%
:
Nếu bạn muốn giới hạn hình ảnh phản hồi ở kích thước tối đa, hãy sử dụng thuộc tính max-width
, với giá trị pixel bạn chọn:
Hãy xem Hướng dẫn về hình ảnh CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho hình ảnh.
Hãy truy cập Hướng dẫn CSS RWD của chúng tôi để tìm hiểu thêm về thiết kế web đáp ứng.