Thuộc tính object-position CSS

CSS object-position thuộc tính được sử dụng để chỉ định vị trí của <img> hoặc <video> trong khung chứa của nó.

hình ảnh

Xem hình ảnh dưới đây từ Wuhan, kích thước 600x400 pixel:

Tiếp theo, chúng ta sử dụng object-fit: cover; để duy trì tỷ lệ khung hình và lấp đầy kích thước đã cho. Tuy nhiên, hình ảnh sẽ bị cắt để phù hợp, như sau:

Mẫu

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

Thử nghiệm trực tiếp

sử dụng thuộc tính object-position

Giả sử phần hình ảnh hiển thị không phải là vị trí mà chúng ta muốn. Để định vị hình ảnh, chúng ta sẽ sử dụng object-position thuộc tính.

Tại đây, chúng ta sẽ sử dụng object-position thuộc tính để định vị hình ảnh, để tòa nhà cổ đặt ở trung tâm:

Mẫu

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

Thử nghiệm trực tiếp

Tại đây, chúng ta sẽ sử dụng object-position Thuộc tính để định vị hình ảnh, để famous Forbidden City corner tower nằm ở bên phải:

Mẫu

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

Thử nghiệm trực tiếp

Thuộc tính CSS object-*

Bảng dưới đây liệt kê các thuộc tính CSS object-*: