Thuộc tính CSS object-fit điều khiển cách một phần tử (thường là <img> hoặc background-image) co giãn để vừa với width/height của container chứa nó.
5 giá trị của object-fit
contain: Giữ tỷ lệ khung hình. Nếu tỷ lệ không khớp, xuất hiện thanh rỗng (letterbox) ở các cạnh không khớp.cover: Giữ tỷ lệ khung hình và lấp đầy content box. Nếu tỷ lệ không khớp, ảnh bị cắt (clipped) để vừa.fill: Kéo dãn ảnh để lấp đầy content box, bỏ qua tỷ lệ gốc → ảnh bị biến dạng.none: Ảnh giữ kích thước gốc, không co giãn.scale-down: Tự chọn giữanonehoặccontain— cái nào cho kích thước nhỏ hơn.
Kết hợp với object-position để căn chỉnh vị trí ảnh trong container (mặc định 50% 50% — giữa).
Hỗ trợ trình duyệt
Hỗ trợ khá rộng. Cần kiểm tra kỹ nếu phát triển cho IE cũ, Edge cũ, Opera cũ.
Kết luận
object-fit dùng trực tiếp trên <img> hoặc replaced elements để kiểm soát cách lấp đầy container. Dùng cùng object-position để tinh chỉnh vị trí hiển thị.