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;
}