CSS Object Fit/Position

❮ Previous Home Next ❯

Object Fit

The object-fit property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Syntax:

object-fit: none|fill|contain|cover|scale-down;



This image is 600×400 pixels look without object-fill:

flowers

The CSS object-fit: none;

This value specifies the replaced content is not resized.

flowers

Example

img {
  width: 200px;
  height: 300px;
  object-fit: none;
}



The CSS object-fit: fill;

This is default value. and it sets the replaced content is sized to fill the element's content box.

flowers

Example

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}



The CSS object-fit: contain;

It sets the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.

flowers

Example

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}



The CSS object-fit: cover;

It sets the replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.

flowers

Example

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}



The CSS object-fit: scale-down;

The content is sized as if none or contain were specified (would result in a smaller concrete object size).

flowers

Example

img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}



Alignment of Images

You can align two images and make them to fill the width of 50% of the browser window and 100% of the height.

The following example will not use object-fit, so when you resize the browser window, the aspect ratio of the images will be disrupted:

flowers flowers

Example

img {
  float: left;
  width: 50%;
  height: 100%;
}

The following example will use object-fit, so when you resize the browser window, the aspect ratio of the images will not be disrupted:

flowers flowers

Example

img {
  float: left;
  width: 50%;
  height: 100%;
  object-fit: cover;
}






Object Position

The object-position property specifies the alignment of the selected replaced element's contents within the element's box.

Areas of the box which aren't covered by the replaced element's object will show the element's background.

Syntax:

object-position: position;

position - Specifies the position of the image or video inside its content box.

Can be a string (left, center or right), or a number (in px or %). Negative values are allowed.

Original image:

Flowers

object-position: 10px 10px;

Flowers

Example

.example {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: 10px 10px;
  border: 3px solid black;
}



The following example use percentage value:

object-position: 10% 100%;

Flowers

Example

.example {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 10% 100%;
  border: 3px solid black;
}



The following example use percentage value:

object-position: -100px 0;

Flowers

Example

.example {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: -100px 0;
  border: 3px solid black;
}



All CSS Object Properties

Property Description
object-fit Sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
object-position Specifies the alignment of the selected replaced element's contents within the element's box.
❮ Previous Home Next ❯