Đối tượng-vị trí - Thủ thuật CSS

Các object-positiontài sản được sử dụng kết hợp với object-fitbất động sản và định nghĩa thế nào là một yếu tố chẳng hạn như một đoạn video hoặc hình ảnh là vị trí có tọa độ X / Y bên trong nội dung hộp của nó. Thuộc tính này nhận hai giá trị số, chẳng hạn như 0 10%hoặc 0 10px. Trong các ví dụ đó, số đầu tiên cho biết hình ảnh nên được đặt ở bên trái của hộp nội dung (0), số thứ hai cho biết hình ảnh nên được đặt cách trên cùng 10% hoặc 10px. Cũng có thể sử dụng các giá trị âm.

Giá trị mặc định cho object-positionlà 50% 50%khi sử dụng thuộc object-fittính trên hình ảnh, do đó, theo mặc định, tất cả hình ảnh được đặt ở giữa hộp nội dung của chúng, như sau:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Bản giới thiệu

Dưới đây là một vài ví dụ về cách chúng ta có thể thao tác với object-positionmột hình ảnh với thuộc object-fittính được đặt thành none. 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ử, có thể là một màu hoặc thậm chí là một background-image, như trong ví dụ cuối cùng:

Xem vị trí Pen Object của Robin Rendle (@robinrendle) trên CodePen.