CSS The object-position Property
The CSS object-position property is used to specify how an
<img> or <video> should be positioned within its container.
The Image
Look at the following image
from Paris, which is 400x300 pixels:
Next, we use object-fit: cover; to
keep the aspect ratio and to fill the given dimension. However, the image will
be clipped to fit, like this:
Example
img {
width: 200px;
height: 300px;
object-fit: cover;
}
Using the object-position Property
Let's say that the part of
the image that is shown, is not positioned as we want. To position the image,
we will use the object-position property.
Here we will use the object-position property
to position the image so that the great old building is in center:
Example
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
Here we will use the object-position property
to position the image so that the famous Eiffel Tower is in center:
Example
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS Object-* Properties
The following table lists
the CSS object-* properties:
|
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" |
