Rate this post

object-fit là một thuộc tính trong CSS dùng để xác định cách mà một hình ảnh hoặc video sẽ được vẽ trong một khu vực có kích thước xác định.

Các bài viết liên quan:

Các giá trị của object-fit bao gồm:

  • fill: Hình ảnh hoặc video sẽ được mở rộng để điền đầy khu vực chứa, có thể làm mất đi một phần của hình ảnh hoặc video.
  • contain: Hình ảnh hoặc video sẽ được vẽ trong khu vực chứa và giữ nguyên tỷ lệ của nó, có thể làm cho hình ảnh hoặc video có một khoảng trắng trống xung quanh.
  • cover: Hình ảnh hoặc video sẽ được mở rộng để điền đầy khu vực chứa và giữ nguyên tỷ lệ của nó, có thể làm mất đi một phần của hình ảnh hoặc video.
  • none: Hình ảnh hoặc video sẽ được vẽ theo kích thước ban đầu của nó, có thể làm cho hình ảnh hoặc video có một khoảng trắng trống xung quanh hoặc bị cắt bớt.
  • scale-down: Hình ảnh hoặc video sẽ được vẽ theo kích thước ban đầu của nó nếu nó nhỏ hơn khu vực chứa, hoặc được mở rộng để điền đầy khu vực chứa nếu nó lớn hơn khu vực chứa.

Ví dụ:

/* Fill the container with the image, may crop the image */
img {
  object-fit: fill;
}

/* Scale the image to fit inside the container, may leave space around the image */
video {
  object-fit: contain;
}

/* Scale the image to cover the container, may crop the image */
img {
  object-fit: cover;
}

/* Show the image at its original size, may leave space around the image */
img {
  object-fit: none;
}

Lưu ý: thuộc tính object-fit chỉ áp dụng cho hình ảnh hoặc video, nếu áp dụng cho các thành phần khác sẽ không có tác dụng.

Một số ví dụ object-fit trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính object-fit trong CSS:

  1. Mở rộng hình ảnh để điền đầy khu vực chứa, có thể cắt bớt phần của hình ảnh:
img {
  object-fit: fill;
}
  1. Tỷ lệ hình ảnh để vẽ trong khu vực chứa và giữ nguyên tỷ lệ của nó, có thể tạo ra một khoảng trắng trống xung quanh hình ảnh:
video {
  object-fit: contain;
}
  1. Mở rộng hình ảnh để điền đầy khu vực chứa và giữ nguyên tỷ lệ của nó, có thể cắt bớt phần của hình ảnh:
img {
  object-fit: cover;
}
  1. Hiển thị hình ảnh theo kích thước ban đầu của nó, có thể tạo ra một khoảng trắng trống xung quanh hoặc bị cắt bớt hình ảnh:
img {
  object-fit: none;
}
  1. Tỷ lệ hình ảnh để vẽ trong khu vực chứa nếu nó nhỏ hơn, hoặc mở rộng để điền đầy khu vực chứa nếu nó lớn hơn
img {
  object-fit: scale-down;
}

Dưới đây là một số ví dụ tiếp theo về cách sử dụng thuộc tính object-fit trong CSS:

  1. Canh giữa hình ảnh trong khu vực chứa và giữ nguyên tỷ lệ của nó:
img {
  object-fit: contain;
  object-position: center;
}
  1. Canh góc trái trên cùng của hình ảnh trong khu vực chứa và giữ nguyên tỷ lệ của nó:
img {
  object-fit: contain;
  object-position: top left;
}
  1. Tạo hiệu ứng parallax với hình ảnh nằm trong container:
.parallax-image {
  object-fit: cover;
  object-position: center;
  transform: translateY(-50%);
}
  1. Tạo hiệu ứng responsive image với hình ảnh nằm trong container và giữ nguyên tỷ lệ của nó:
img {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

Lưu ý: các ví dụ trên chỉ là một số ví dụ để giúp bạn hiểu cách sử dụng thuộc tính object-fit trong CSS, bạn có thể sử dụng các giá trị khác và kết hợp với các thuộc tính khác để tạo ra hiệu ứng tùy ý.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now