Đối tượng thuộc tính CSS chia tỷ lệ một phần tử theo chiều rộng và chiều cao của vùng chứa mà nó nằm trong đó. Hình nền là phần tử phổ biến nhất mà bạn sẽ gặp khi là nhà phát triển sử dụng thuộc tính này.
Có năm giá trị có thể có cho thuộc tính object-fit. Chúng tôi sẽ sử dụng một hình ảnh làm ví dụ để minh họa các giá trị khác nhau:
- object-fit:chứa - Với hàm chứa, tỷ lệ khung hình của phần tử đi trong vùng chứa (hình ảnh trong trường hợp này) được duy trì. Nếu tỷ lệ không khớp, bạn sẽ thấy các thanh (hãy nghĩ đến thời điểm phát hành video màn hình rộng và trên TV cũ hơn, bạn sẽ thấy các thanh ở trên cùng và dưới cùng của màn hình) ở bất kỳ bên nào mà tỷ lệ không khớp.
- object-fit:cover - Bìa duy trì tỷ lệ khung hình trong khi lấp đầy hộp nội dung. Nếu tỷ lệ khung hình không khớp, hình ảnh sẽ bị cắt bớt cho vừa vặn.
- object-fit:lấp đầy - Hình ảnh sẽ có kích thước trong trường hợp này để lấp đầy hộp nội dung của phần tử, bất kể tỷ lệ khung hình gốc có khớp hay không. Điều này có thể sẽ kéo dài hình ảnh để phù hợp.
- object-fit:none - Hình ảnh sẽ duy trì kích thước ban đầu.
- object-fit:scale-down - Thuộc tính thu nhỏ tự động chọn không có hoặc chứa , tùy theo điều kiện nào dẫn đến kích thước hình ảnh tổng thể nhỏ hơn. Trong trường hợp này, quy mô xuống sẽ chọn chứa :
Hỗ trợ trình duyệt khá rộng rãi cho thuộc tính này. Kiểm tra kỹ hỗ trợ nếu bạn đang phát triển cho các trình duyệt Internet Explorer, Microsoft Edge hoặc Opera cũ hơn.
Kết luận
Trong bài viết này, chúng ta đã xem xét thuộc tính object-fit. Nó được sử dụng trên các phần tử có thể được chèn và lấp đầy một vùng chứa. Thuộc tính được sử dụng trực tiếp trên hoặc các phần tử được thay thế khác để kiểm soát cách
lấp đầy vùng chứa. Sử dụng thuộc tính object-fit kết hợp với thuộc tính object-position để kiểm soát cách phần tử được hiển thị trong vùng chứa của nó.