CSS object-fit Property

Description

The object-fit property controls how the replaced content of an element — such as images, videos or canvases — is scaled and positioned inside the element’s own content box. It does not change the element’s box itself (the used width and height) but instead determines how the media inside that box is resized and clipped to match the box dimensions. In practice this means object-fit only has a visible effect when the element’s used width/height differ from the intrinsic dimensions of the replaced content.

When the content is scaled to fit the box, the property governs whether the media is uniformly scaled (preserving its aspect ratio) or stretched to fill, whether one dimension is fitted and the other left with empty space, and whether parts of the media are cropped off. If the scaled content does not completely cover the box, alignment of the remaining content — or the placement of any cropped region — is determined by object-position, which you can use to nudge the focal point within the element’s box.

It’s important to understand the relationship between the element’s box sizing and the media it contains. The visual result of object-fit depends on how the box size is established — for example by explicit width and height values, or by the element’s intrinsic sizing rules. If the box naturally matches the media’s intrinsic size, no scaling occurs and the property has no effect. Conversely, when the box and intrinsic sizes differ, object-fit determines whether the content is scaled up or down and whether any portion is clipped.

In responsive layouts you often combine this behavior with sizing strategies and occasionally with the aspect-ratio property to produce predictable results across different viewport sizes. Because object-fit only affects the rendering of the replaced element’s content, it’s a handy tool for controlling visual framing of media without altering layout measurements or the element’s participation in document flow.

Definition

Initial value: fill
Applies to: Replaced elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.objectFit

Interactive Demo

Syntax

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

Values

fillThe replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
containThe replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
coverThe replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
noneThe replaced content is not resized to fit inside the element's content box: determine the object's concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element's used width and height.
scale-downSize the content as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size.

Example

HTML

<div class="gallery">

  <figure class="card">

    <div class="frame frame--cover">

      <img src="https://picsum.photos/id/1015/600/400" alt="Mountains">

    </div>

    <figcaption>object-fit: cover</figcaption>

  </figure>



  <figure class="card">

    <div class="frame frame--contain">

      <img src="https://picsum.photos/id/1025/600/400" alt="Dog">

    </div>

    <figcaption>object-fit: contain</figcaption>

  </figure>



  <figure class="card">

    <div class="frame frame--fill">

      <img src="https://picsum.photos/id/1035/600/400" alt="Bridge">

    </div>

    <figcaption>object-fit: fill</figcaption>

  </figure>



  <figure class="card">

    <div class="frame frame--none">

      <img src="https://picsum.photos/id/1043/600/400" alt="Forest">

    </div>

    <figcaption>object-fit: none</figcaption>

  </figure>



  <figure class="card">

    <div class="frame frame--scaledown">

      <img src="https://picsum.photos/id/1052/600/400" alt="Sea">

    </div>

    <figcaption>object-fit: scale-down</figcaption>

  </figure>

</div>

CSS

/* Simple demo of object-fit */
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 24px;
  background: #f7f7fb;
  color: #111;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 10px rgba(12, 15, 20, 0.04);
  text-align: center;
}
.frame {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
}
.frame--cover img { object-fit: cover; }
.frame--contain img { object-fit: contain; background: #e9eef6; }
.frame--fill img { object-fit: fill; }
.frame--none img { object-fit: none; }
.frame--scaledown img { object-fit: scale-down; }
figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: #444;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS object-fit property. Hover over a browser icon to see the version that first introduced support for this CSS property.