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:
- thẻ section trong html
- Các hướng SEO mới trong tìm kiếm 2021
- Cách sử dụng video để xây dựng backlink
- Video Marketing là gì?
- Hướng dẫn tạo và chèn gallery ảnh đơn giản
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ụ:
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:
- 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:
- 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:
- 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:
- 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:
- 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
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:
- Canh giữa hình ảnh trong khu vực chứa và giữ nguyên tỷ lệ của nó:
- 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ó:
- Tạo hiệu ứng parallax với hình ảnh nằm trong container:
- 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ó:
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 ý.
So sánh object-fit và background-size trong css
Cả object-fit và background-size là những thuộc tính CSS được sử dụng để điều chỉnh kích thước và hiển thị của hình ảnh trong một phần tử trên trang web. Tuy nhiên, chúng có một số điểm khác nhau quan trọng như sau:
- Sử dụng trong các phần tử khác nhau: Thuộc tính object-fit được sử dụng để điều chỉnh kích thước và hiển thị của hình ảnh trong một phần tử HTML, trong khi đó thuộc tính background-size được sử dụng để điều chỉnh kích thước và hiển thị của hình nền của một phần tử HTML.
- Tác động đến nội dung khác nhau: Object-fit tác động trực tiếp đến nội dung hình ảnh, trong khi đó background-size tác động đến hình nền của phần tử HTML.
- Phạm vi áp dụng khác nhau: Object-fit áp dụng cho một hình ảnh cụ thể, trong khi đó background-size áp dụng cho toàn bộ phần tử HTML.
- Các giá trị khác nhau: Object-fit có thể được sử dụng với các giá trị fill, contain, cover, scale-down và none, trong khi đó background-size có thể được sử dụng với các giá trị auto, cover, contain và các giá trị kích thước khác.
Tóm lại, object-fit và background-size đều có vai trò quan trọng trong thiết kế web, tuy nhiên chúng được sử dụng cho các mục đích khác nhau và có các thuộc tính và giá trị khác nhau để điều chỉnh kích thước và hiển thị của nội dung của phần tử.