object-position
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính object-position CSS chỉ định vị trí căn chỉnh của nội dung của phần tử thay thế được chọn trong hộp của phần tử. Các vùng trong hộp không được che phủ bởi đối tượng của phần tử 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ủa phần tử 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.
Try it
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/moon.jpg" />
</section>
#example-element {
height: 250px;
width: 250px;
object-fit: none;
border: 1px solid red;
}
Cú pháp
/* Giá trị từ khóa */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* Giá trị <percentage> */
object-position: 25% 75%;
/* Giá trị <length> */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* Giá trị offset cạnh */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* Giá trị toàn cục */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
Giá trị
<position>-
Từ một đến bốn giá trị xác định vị trí 2D của phần tử. Có thể sử dụng offset tương đối hoặc tuyệt đối.
Note: Vị trí có thể được đặt sao cho phần tử thay thế được vẽ bên ngoài hộp của nó.
Định nghĩa hình thức
| Initial value | 50% 50% |
|---|---|
| Applies to | replaced elements |
| Inherited | yes |
| Percentages | refer to width and height of element itself |
| Computed value | as specified |
| Animation type | a repeatable list |
Cú pháp hình thức
object-position =
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
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ử <img>, mỗi phần tử hiển thị logo MDN.
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
CSS
CSS bao gồm kiểu mặc định cho chính phần tử <img>, cũng như các kiểu riêng biệt cho từng 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ó lùi vào 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ó nằm sát cạnh phải của hộp phần tử và nằm ở 10% so với chiều cao của hộp phần tử.
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Images Module Level 3 # the-object-position |
Khả năng tương thích trình duyệt
Xem thêm
- Các thuộc tính CSS liên quan đến hình ảnh khác:
object-fit,image-orientation,image-rendering,image-resolution.