CSS Thuộc tính vị trí đối tượng
object-position
CSS được sử dụng để chỉ định cách định vị <img> hoặc <video> trong vùng chứa của nó.
Bức hình
Hãy xem hình ảnh sau đây từ Paris, có kích thước 400x300 pixel:
Tiếp theo, chúng tôi sử dụng object-fit: cover;
để giữ tỷ lệ khung hình và điền vào kích thước nhất định. Tuy nhiên, hình ảnh sẽ được cắt bớt cho phù hợp, như sau:
Sử dụng thuộc tính vị trí đối tượng
Giả sử phần hình ảnh được hiển thị không được định vị như chúng ta mong muốn. Để định vị hình ảnh, chúng ta sẽ sử dụng thuộc tính object-position
.
Ở đây chúng ta sẽ sử dụng thuộc tính object-position
để định vị hình ảnh sao cho tòa nhà cổ vĩ đại nằm ở trung tâm:
Ví dụ
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Hãy tự mình thử » Ở đây chúng ta sẽ sử dụng thuộc tính object-position
để định vị hình ảnh sao cho Tháp Eiffel nổi tiếng nằm ở trung tâm:
Ví dụ
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Hãy tự mình thử »Thuộc tính đối tượng CSS-*
Bảng sau liệt kê các thuộc tính CSS object-*:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |