Thuộc tính CSS object-position chỉ định căn chỉnh nội dung của phần tử được thay thế đã chọn trong hộp của phần tử. Các khu vực của hộp không được bao phủ bởi đối tượng của phần tử được thay thế sẽ hiển thị nền của phần tử
Bạn có thể điều chỉnh cách kích thước nội tại của đối tượng được thay thế [tức là kích thước tự nhiên của nó] được điều chỉnh để vừa với hộp của phần tử bằng cách sử dụng thuộc tính object-fit
Thử nó
cú pháp
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* values */
object-position: 25% 75%;
/* values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
giá trị
Từ một đến bốn giá trị xác định vị trí 2D của phần tử. Độ lệch tương đối hoặc tuyệt đối có thể được sử dụng
Ghi chú. Vị trí có thể được đặt để phần tử được thay thế được vẽ bên ngoài hộp của nó
định nghĩa chính thức
Giá trị ban đầu50% 50%Áp dụng cho các phần tử được thay thếKế thừayePercentages tham chiếu đến chiều rộng và chiều cao của chính phần tửGiá trị được tính toán như đã chỉ địnhKiểu hoạt ảnhdanh sách lặp lại của danh sách đơn giản về độ dài, tỷ lệ phần trăm hoặc calc
cú pháp chính thức
object-position =
=
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | ] [ top | center | bottom | ]? |
[ [ left | right ] ] && [ [ top | bottom ] ]
=
|
ví dụ
Định vị nội dung hình ảnh
HTML
Ở đây chúng ta thấy HTML bao gồm hai phần tử , mỗi phần tử hiển thị logo MDN
CSS
CSS bao gồm kiểu dáng mặc định cho chính phần tử , cũng như các kiểu riêng biệt cho từng hình ảnh trong số hai hình ảnh
img {
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;
object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position: 100% 10%;
}
Hình ảnh đầu tiên được định vị với cạnh trái của nó chèn 10 pixel từ cạnh trái của hộp phần tử. Hình ảnh thứ hai được định vị với cạnh phải của nó ngang với cạnh phải của hộp phần tử và nằm 10% chiều cao của hộp phần tử