Thuộc tính vị trí đối tượng CSS
Ví dụ
Thay đổi kích thước hình ảnh để vừa với hộp nội dung của nó và đặt hình ảnh cách 5px từ bên trái và 10% từ trên cùng bên trong hộp nội dung:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính object-position
được sử dụng cùng với object-fit để chỉ định cách định vị <img> hoặc <video> với tọa độ x/y bên trong "hộp nội dung riêng" của nó.
Giá trị mặc định: | 50% 50% |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.objectPosition="0 10%" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Cú pháp CSS
object-position: position |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed | Try it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: CSS phù hợp với đối tượng
Tham chiếu CSS: CSS phù hợp với đối tượng
Tham chiếu DOM HTML: Thuộc tính objectPosition