CSS The object-position Property

❮ Previous Next ❯

The CSS property called object-position is used to decide where to put an <img> or <video> inside its box.

The Image

Here's a picture from Paris, and it's 400x300 pixels in size.

Next, we employ object-fit: cover to maintain the image's shape and completely fill the specified size. Nevertheless, the image will be cropped to match, like this:

Using the object-position Property

Suppose the visible part of an image isn't where we want it to be. To move the image to the right place, we'll use the "object-position" property.

In this example, we'll employ the object-position property to place the image where ever you want.

In this example, we're going to use the object-position property to place the image in a way that makes the Eiffel Tower appear in the center.

CSS Object-* Properties

Below is a table that shows CSS object-* properties:

Property	Description
object-fit	Describes how to change the size of an <img> or <video> to fit inside its box.
object-position	Describes where to place an image or video using specific horizontal (x) and vertical (y) coordinates within its own content box.

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: cover</h2>
    <img src="/assets/files/eiffel-tower.jpg" alt="Eiffel Tower" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: cover;
        object-position: 80% 100%;
      }
    </style>
  </head>
  <body>
    <h2>Using object-position</h2>
    <p>We'll use the "object-position" property to move the image. This will help us place the Eiffle Tower where ever you want.</p>
    <img src="/assets/files/eiffel-tower.jpg" alt="Eiffel Tower" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Using object-position</h2>
    <p>Here we'll use the object-position property to place the picture where the famous Eiffel Tower is at the center.</p>
    <img src="/assets/files/eiffel-tower.jpg" alt="Eiffel Tower" width="400" height="300">
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS The object-position Property

The Image

Using the object-position Property

CSS Object-* Properties

Web Development