Thuộc tính object-fit CSS

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

Thuộc tính objectFit đượ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 container của nó.

Thuộc tính này thông báo cách nội dung được lấp đầy vào container. Ví dụ: "Giữ tỷ lệ ngang dọc" hoặc "Mở rộng và chiếm nhiều không gian nhất có thể".

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

Tài liệu tham khảo CSS:CSS object-position

Tài liệu tham khảo HTML DOM:Thuộc tính objectFit

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

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Giá trị	Mô tả
fill	Giá trị 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ử.
cover	Thay đổi kích thước nội dung thay thế để giữ tỷ lệ ngang dọc khi lấp đầy khung nội dung của phần tử lấp đầy. Đố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 tùy thuộc vào none hoặc contain, phụ thuộc vào哪一个 nhận 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	Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Giá trị mặc định:	Xem thêm thuộc tính riêng lẻ.
Kế thừa:	Không
Ch製 hoạt hình:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến hoạt hình.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.objectFit="cover"

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

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