Thuộc tính objectFit của style

Định nghĩa và cách sử dụng

objectFit Thuộc tính được sử dụng để quy định cách điều chỉnh kích thước của <img> hoặc <video> để phù hợp với khung của chúng.

Thuộc tính này cho biết nội dung được lấp đầy vào容器 theo nhiều cách khác nhau; ví dụ như “giữ tỷ lệ ngang dọc” hoặc “kéo dãn và chiếm nhiều không gian nhất có thể”.

Xem thêm:

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

Tài liệu tham khảo CSS:Thuộc tính object-fit

Mô hình

Cắt bỏ hai bên của hình ảnh, giữ tỷ lệ ngang dọc và lấp đầy không gian:

document.getElementById("myImg").style.objectFit = "cover";

Thử ngay

Cú pháp

Trả về thuộc tính objectFit:

object.style.objectFit

Đặt thuộc tính objectFit:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
fill Mặc định. Thay đổi kích thước nội dung thay thế để lấp đầy khung nội dung của phần tử. Nếu cần thiết, đối tượng sẽ bị kéo dãn hoặc nén.
contain Phóng to nội dung thay thế để giữ tỷ lệ ngang dọc, đồng thời phù hợp với khung nội dung của phần tử. Đối tượng sẽ bị cắt bỏ.
cover Thay đổi kích thước nội dung thay thế để giữ tỷ lệ ngang dọc khi lấp đầy toàn bộ khung nội dung của phần tử. Đối tượng sẽ bị cắt bỏ.
none Nội dung thay thế sẽ không thay đổi kích thước.
scale-down Kích thước của nội dung so với none hoặc contain một trong số đó, tùy thuộc vào ai nhận được kích thước đối tượng nhỏ hơn.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: fill
Giá trị trả về: Chuỗi biểu thị kích thước của phần tử Thuộc tính object-fit.
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ thuộc tính này.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0