Thuộc tính object-position CSS

Định nghĩa và cách sử dụng

Thuộc tính object-position cùng với object-fit có thể xác định cách sử dụng tọa độ x/y để định vị <img> hoặc <video> trong khung nội dung của nó.

Xem thêm:

Hướng dẫn CSS:CSS object-fit

Hướng dẫn tham khảo CSS:CSS object-position

Hướng dẫn tham khảo HTML DOM:Thuộc tính objectPosition

Mô hình

Chỉnh sửa kích thước của hình ảnh để phù hợp với khung nội dung, và di chuyển hình ảnh trong khung nội dung từ bên trái 5px, từ trên cùng 10％:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Thử ngay

Cú pháp CSS

object-position: position|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
position

Định nghĩa vị trí của hình ảnh hoặc video trong khung nội dung.

Giá trị đầu tiên kiểm soát trục x, giá trị thứ hai kiểm soát trục y.

Có thể là chuỗi (left, center hoặc right) hoặc số (bằng px hoặc ％). Cho phép giá trị âm.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 50% 50%
Kế thừa: Có
Chế tạo animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.objectPosition="0 10%"

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0