Đối tượng phù hợp - Thủ thuật CSS

Các object-fitđịnh nghĩa bất động sản như thế nào một yếu tố phản ứng với chiều cao và chiều rộng của hộp nội dung của nó. Nó dành cho hình ảnh, video và các định dạng phương tiện có thể nhúng khác cùng với thuộc object-positiontính. Được sử dụng bởi chính nó, object-fitcho phép chúng tôi cắt một hình ảnh nội tuyến bằng cách cho chúng tôi kiểm soát chi tiết cách nó thu nhỏ và kéo dài bên trong hộp của nó.

object-fit có thể được đặt bằng một trong năm giá trị sau:

fill: đây là giá trị mặc định kéo dài hình ảnh để vừa với hộp nội dung, bất kể tỷ lệ khung hình của nó.
contain: tăng hoặc giảm kích thước của hình ảnh để lấp đầy hộp trong khi vẫn giữ nguyên tỷ lệ khung hình.
cover: hình ảnh sẽ lấp đầy chiều cao và chiều rộng của hộp, một lần nữa duy trì tỷ lệ co nhưng thường cắt hình ảnh trong quá trình này.
none: image sẽ bỏ qua chiều cao và chiều rộng của phần gốc và giữ nguyên kích thước ban đầu.
scale-down: hình ảnh sẽ so sánh sự khác biệt giữa nonevà containđể tìm ra kích thước vật thể bê tông nhỏ nhất.

Đây là cách chúng tôi có thể đặt thuộc tính đó:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Vì hình ảnh thứ hai có tỷ lệ khung hình khác với hình ảnh gốc ở bên trái, nó sẽ kéo dài ra bên ngoài phạm vi hộp nội dung của nó, cắt phần trên và dưới của hình ảnh.

Cần lưu ý rằng theo mặc định, hình ảnh được căn giữa trong hộp nội dung của nó nhưng điều này có thể được thay đổi với thuộc object-positiontính.

Bản giới thiệu

Bản trình diễn dưới đây cho thấy năm ví dụ mô tả chi tiết cách chúng ta có thể muốn một hình ảnh thu nhỏ vào một hộp nội dung đôi khi nhỏ hơn hoặc lớn hơn chiều rộng ban đầu của nó (thay đổi kích thước trình duyệt để có ý tưởng tốt hơn về cách thức hoạt động của nó):

Xem đối tượng Pen-fit của Robin Rendle (@robinrendle) trên CodePen.

Nếu nội dung của hình ảnh không lấp đầy hộp nội dung vì bất kỳ lý do gì thì không gian chưa được lấp đầy sẽ hiển thị nền của phần tử, trong trường hợp này là nền màu xám nhạt.