CSS Object-Fit Property

The CSS object-fit property is used to control how an <img> or <video> fits inside its container. This is particularly useful when you want to maintain aspect ratios, avoid distortion, or focus on a specific part of the media.

It works on any media element and ensures responsive, clean layouts without manually cropping or resizing images.

Object-Fit Values

Value	Description
`fill`	Stretches the media to fill the container; does not preserve aspect ratio.
`cover`	Preserves aspect ratio and fills the container; may crop parts.
`contain`	Preserves aspect ratio and fits media inside container; may leave empty space.
`none`	Media is not resized, keeps its original dimensions.
`scale-down`	Scales media down to the smallest size between `none` and `contain`.

`object-fit: fill`

The image is stretched or squeezed to completely fill the container. Aspect ratio is not preserved, so the image may look distorted.

<div class="image-container">
  <img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Fill" class="fit-fill">
</div>

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.fit-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

`object-fit: cover`

The image fills the container while keeping its aspect ratio. Some parts may be cropped. Ideal for hero sections or banners.

<div class="image-container">
  <img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Cover" class="fit-cover">
</div>

.fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

`object-fit: contain`

The image fits inside the container without cropping. Aspect ratio is preserved, but there may be empty space if the aspect ratios differ.

<div class="image-container">
  <img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Contain" class="fit-contain">
</div>

.fit-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f0f0f0; /* visible in empty space */
}

`object-fit: none`

The image keeps its original size and does not resize. May overflow or leave empty space.

<div class="image-container">
  <img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit None" class="fit-none">
</div>

.fit-none {
  width: 100%;
  height: 100%;
  object-fit: none;
}

`object-fit: scale-down`

The image is scaled down to the smaller size of none or contain. It will never be larger than the original.

<div class="image-container">
  <img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Scale Down" class="fit-scale-down">
</div>

.fit-scale-down {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}