Cách tạo: Hình ảnh phản hồi

Học cách sử dụng CSS để tạo hình ảnh phản hồi.

Hình ảnh phản hồi sẽ tự động điều chỉnh để phù hợp với kích thước 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:

Lights

Xem hiệu ứng

Cách tạo hình ảnh phản hồi

Bước 1 - Thêm HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Bước 2 - Thêm CSS:

Nếu bạn muốn hình ảnh có khả năng phản hồi có thể cả phóng to và thu nhỏ, hãy đặt CSS width Thuộc tính 100%,height đặt thành auto:

Ví dụ

.responsive {
  width: 100%;
  height: auto;
}

Thử trực tiếp

Nếu bạn muốn hình ảnh co lại khi cần thiết nhưng绝不放大 lớn hơn kích thước ban đầu, hãy sử dụng max-width: 100%:

Ví dụ

.responsive {
  max-width: 100%;
  height: auto;
}

Thử trực tiếp

Nếu bạn muốn giới hạn ảnh phản hồi để có kích thước lớn nhất, hãy sử dụng max-width Thuộc tính và giá trị pixel mà bạn chọn:

Ví dụ

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Thử trực tiếp

Trang liên quan

Giáo trình:Hình ảnh CSS

Giáo trình:CSS Thiết kế trang web tương tác