Login
  • CSS
  • CSS object-position

css object position default

CSS The object-position Property

 

The CSS object-position property is used to specify how an or 

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:

 

 
Login
ADS CODE