View Categories

CSS object-position

1 min read

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 400×300 pixels:

sunset

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:

Sunset
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:

Sunset
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:

Paris
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”

Powered by BetterDocs

Leave a Reply