Cách thực hiện - Hình ảnh đáp ứng
Tìm hiểu cách tạo hình ảnh đáp ứng 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 đáp ứng
Bước 1) Thêm HTML:
Thí dụ
<img src="nature.jpg" alt="Nature" class="responsive">
Bước 2) Thêm CSS:
Nếu bạn muốn hình ảnh mở rộng quy mô cả lên và giảm về khả năng phản hồi, hãy đặt thuộc tính CSS width
thành 100% và height
tự động:
Thí dụ
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.