Thuộc tính CSS object-position được sử dụng để căn chỉnh bất kỳ phần tử thay thế nào đã chọn (e. g. , một <img>) trong hộp chứa nó
img { object-position: right bottom; }Mặc dù có thể thấy object-position được sử dụng trên các phần tử <img> là phổ biến nhất, nhưng nó có thể được sử dụng trên các loại phần tử được thay thế khác, như object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>4, object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>0 và object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>1
object-position là một phần của đặc tả Mô-đun Hình ảnh CSS Cấp 3
cú pháp
object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>Đó chỉ là một cách giải thích thực sự dài dòng rằng chúng ta có thể sử dụng từ khóa hoặc giá trị độ dài để đặt căn chỉnh của phần tử trong vùng chứa
giá trị
/* Positional values */ object-position: 50% 50%; /* default position */ object-position: right bottom; object-position: 20px 95px; object-position: center 20px; /* mix and match */ object-position: 60% top; /* mix and match */ /* Global values */ object-position: inherit; object-position: initial; object-position: unset;ví dụ
Hãy xem xét một vài ví dụ khác nhau về tài sản object-position tại nơi làm việc
sử dụng cơ bản
Dự phòng nhúng CodePen
Thông tin chi tiếtVí dụ trên minh họa cách object-position căn chỉnh phần tử hình ảnh so với vùng chứa chính của nó khi hình ảnh nhỏ hơn vùng chứa chính. Một lần nữa, lưu ý việc sử dụng object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>5 trong đó để làm cho object-position hoạt động
Hình ảnh vượt quá vùng chứa
Dự phòng nhúng CodePen
Thông tin chi tiếtBản trình diễn này minh họa cách một phần tử hình ảnh lớn hơn vùng chứa chính của nó hoạt động với các giá trị object-position khác nhau
Các loại nội dung thay thế khác
Dự phòng nhúng CodePen
Thông tin chi tiếtVí dụ này cho thấy object-position được sử dụng với các loại nội dung được thay thế khác, bao gồm object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>0 và object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>4
Thủ thuật
Cắt ảnh đáp ứngVí dụ bên dưới có bố cục đáp ứng cơ bản với hình ảnh phía trên văn bản. Có lẽ người đàn ông trong ảnh này là chủ đề của bài viết và khi kích thước màn hình nhỏ hơn, chúng tôi muốn duy trì sự tập trung vào chủ đề đó. object-position được sử dụng ở đây để duy trì tiêu điểm đó, cắt xén hình ảnh tại một điểm ngắt cụ thể với /* Positional values */ object-position: 50% 50%; /* default position */ object-position: right bottom; object-position: 20px 95px; object-position: center 20px; /* mix and match */ object-position: 60% top; /* mix and match */ /* Global values */ object-position: inherit; object-position: initial; object-position: unset;2
Dự phòng nhúng CodePen
mặt khảmDự phòng nhúng CodePen
Ngoài trọng tâm theo vị trí, việc sử dụng thực tế của object-position bị hạn chế. Tuy nhiên, nó là một thuộc tính mà bạn có thể sáng tạo một chút khi nói đến thiết kế và bố cục trang.
đường viền cách điệuDự phòng nhúng CodePen
Một điều thú vị khác mà chúng ta có thể làm là sử dụng không gian âm của vùng chứa chính để vẽ các đường viền giả. Chúng tôi đặt màu nền trên vùng chứa chính, thả vào một hình ảnh nhỏ hơn vùng chứa, sau đó sử dụng object-position để căn chỉnh hình ảnh. Những gì còn lại trông giống như một đường viền. Sẽ cực kỳ thú vị khi chúng tôi bắt đầu đặt nhiều thùng chứa lại với nhau vì có vẻ như có một đường thẳng được vẽ giữa chúng, có thể tạo thành các mẫu gọn gàng
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên