CSS object-fit property là gì và cách sử dụng thế nào ?

Trong CSS, thuộc tính object-fit được sử dụng để xác định cách một hình ảnh hoặc video được điều chỉnh kích thước để phù hợp với khung chứa của nó. Thuộc tính này quy định cách một phần tử hiển thị trong khung chứa đã thiết lập chiều rộng và chiều cao. Thông thường, object-fit được áp dụng cho hình ảnh hoặc video. Thuộc tính này giúp xác định cách mà một phần tử phản ứng với chiều rộng và chiều cao của khung chứa của nó.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS object-fit property là gì ?

Thuộc tính CSS object-fit cho phép điều chỉnh kích thước hình ảnh hoặc video để phù hợp với kích thước của khung hiển thị. Nó có thể được sử dụng để thay đổi kích thước của hình ảnh hoặc video, giúp tối ưu hóa không gian hiển thị trên trang web. Điều này giúp cho trang web của bạn hiển thị được nội dung một cách chính xác và hấp dẫn hơn.

Thuộc tính object-fit là một trong những thuộc tính CSS phổ biến nhất được sử dụng để điều chỉnh kích thước của hình ảnh hoặc video. Nó cho phép bạn kiểm soát cách mà nội dung hiển thị trên trang web một cách chính xác và rõ ràng.

Bất kỳ ai muốn điều chỉnh kích thước hình ảnh hoặc video trên trang web của họ đều có thể sử dụng object-fit. Điều này bao gồm các nhà phát triển web, người thiết kế web và các chuyên gia SEO. Thuộc tính này là một công cụ hữu ích trong việc tối ưu hóa không gian hiển thị trên trang web của bạn.

Hướng dẫn CSS object-fit property

Thuộc tính CSS object-fit có thể được áp dụng cho hình ảnh hoặc video. Có năm giá trị chính của thuộc tính này được định nghĩa như sau:

fill

Giá trị mặc định của object-fit là fill. Sử dụng giá trị này, toàn bộ hình ảnh hoặc video sẽ lấp đầy khung chứa. Nội dung được thay thế sẽ được thu nhỏ hoặc kéo dài để phù hợp với khung chứa. Nếu tỷ lệ khung hình của đối tượng không phù hợp với tỷ lệ khung hình của khung, đối tượng sẽ bị nén hoặc kéo dài để phù hợp trong khung. Hình ảnh sẽ lấp đầy khu vực, ngay cả khi tỷ lệ khung hình không phù hợp.

contain

contain điều chỉnh kích thước của nội dung một phần tử để giữ cho nó nằm trong khung hiển thị của nó. Nó sẽ điều chỉnh hình ảnh theo chiều rộng và chiều cao của khung, đồng thời duy trì tỷ lệ khung hình của hình ảnh. N ội dung được thay thế sẽ được thu nhỏ hoặc kéo dài để giữ nguyên tỷ lệ khung hình khi vừa với khung chứa của phần tử.

cover

cover điều chỉnh kích thước của nội dung một phần tử để phủ đầy khung hiển thị. Nó sẽ lấp đầy toàn bộ khung chứa với hình ảnh. Nếu tỷ lệ khung hình của đối tượng không phù hợp với tỷ lệ khung hình của khung, đối tượng sẽ bị cắt bớt để phù hợp trong khung.

none

none không thay đổi kích thước của nội dung được thay thế. Hình ảnh sẽ giữ nguyên kích thước ban đầu và bỏ qua chiều rộng và chiều cao của phần tử cha.

scale-down

scale-down thay đổi kích thước của nội dung một phần tử thành none hoặc contain. Nó cho ra kết quả kích thước đối tượng nhỏ nhất. Nó sẽ tìm kích thước đối tượng nhỏ nhất bằng cách so sánh none và contain.

initial

initial thiết lập thuộc tính về giá trị mặc định, tức là hình ảnh sẽ được kéo dài để phù hợp trong khung chứa vì giá trị mặc định là fill.

inherit

inherit kế thừa giá trị từ phần tử cha của nó.

Ví dụ sử dụng CSS object-fit property

Để giữ nguyên tỷ lệ hình ảnh:

img {
  object-fit: contain;
}

Để kéo dài hình ảnh để lấp đầy conteneur:

img {
  object-fit: cover;
}

Để phóng to hình ảnh để lấp đầy conteneur, ngay cả khi nó bị cắt xén:

img {
  object-fit: fill;
}

Để không thay đổi kích thước hình ảnh:

img {
  object-fit: none;
}

Để không thay đổi kích thước hình ảnh, nhưng phóng to nó lên 100% nếu cần:

img {
  object-fit: scale-down;
}

Dưới đây là một số ví dụ cụ thể hơn về cách sử dụng object-fit:

Để giữ nguyên tỷ lệ hình ảnh trong một thẻ img:

<img src="image.jpg" object-fit="contain" />

Để kéo dài hình ảnh để lấp đầy một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-fit="cover" />
</div>

Để phóng to hình ảnh để lấp đầy một thẻ div, ngay cả khi nó bị cắt xén:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-fit="fill" />
</div>

Để không thay đổi kích thước hình ảnh trong một thẻ div:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-fit="none" />
</div>

Để không thay đổi kích thước hình ảnh trong một thẻ div, nhưng phóng to nó lên 100% nếu cần:

<div style="width: 100px; height: 100px;">
  <img src="image.jpg" object-fit="scale-down" />
</div>

Ưu và Nhược điểm CSS object-fit property

Ưu điểm

Thuộc tính object-fit cho phép bạn kiểm soát cách mà phần tử hiển thị trong khung chứa của nó. Nó giúp bạn tối ưu hóa không gian hiển thị trên trang web của mình và giữ cho nội dung hiển thị đồng nhất và rõ ràng. Thuộc tính này cũng giúp bạn giải quyết các vấn đề về kích thước hình ảnh và video trên trang web của mình.

Nhược điểm

Thuộc tính object-fit chỉ có hiệu quả trên hình ảnh hoặc video. Nếu bạn muốn điều chỉnh kích thước của các phần tử khác, bạn sẽ cần phải tìm cách khác để thực hiện điều này.

Lời khuyên CSS object-fit property

Khi sử dụng thuộc tính object-fit, hãy cân nhắc kích thước của hình ảnh hoặc video và khung chứa của nó. Sử dụng các giá trị khác nhau để xem những gì phù hợp nhất với trang web của bạn. Hãy kiểm tra lại trang web của bạn sau khi thực hiện điều chỉnh kích thước để đảm bảo rằng nội dung được hiển thị một cách chính xác và đồng nhất trên tất cả các thiết bị.