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