HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container
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:
img {
width: 200px;
height:
300px;
object-fit: cover;
}
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:
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:
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
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" |