Thư viện thuật ngữ / Web

Object-fit là gì?

Còn gọi: cách ảnh lấp đầy khung, object fit, object-fit cover, object-fit contain, object-position

Object-fit là thuộc tính CSS quy định cách ảnh hoặc video lấp đầy khung chứa khi tỉ lệ của chúng khác nhau: cover phủ kín khung và cắt bớt phần thừa, contain hiển thị trọn ảnh và để trống phần dư, fill kéo giãn ảnh.

Hiểu kỹ hơn

Đây là thuộc tính designer nên biết tên, vì nó tương ứng trực tiếp với tuỳ chọn ảnh trong Figma: Fill trong Figma gần giống cover, Fit gần giống contain, còn Crop là tự chọn vùng cắt. Ví dụ lưới sản phẩm hay ảnh đại diện dùng cover để mọi thẻ đều đầy khung, dù ảnh gốc ngang hay dọc. Logo đối tác nên dùng contain để không bị cắt mất chữ. Giá trị fill kéo giãn và làm méo ảnh, gần như không nên dùng cho ảnh chụp. Thuộc tính đi kèm object-position quyết định phần nào được giữ khi cắt, ví dụ ưu tiên phía trên để không cắt mất đầu người trong ảnh chân dung. Khi bàn giao, ghi chú cách ảnh co giãn giúp tránh ảnh bị méo trên giao diện thật.