Object Fit and Position

object-fit and object-position governs how "replaced elements" (e.g. <img> or <video>) should fill their container.

CSS Properties

object-fit

Sets how the content of a replaced element should be resized to fit its container.

Specify:

• fill — stretch the object to fill the container (default)
• none — don't resize
• contain — resize the object to fill the container (maintaining its aspect ratio), ensuring the whole object is "contained" in the container (some part of the container can be empty if the aspect ratios do not match)
• cover — resize the object to fill the container (maintaining its aspect ratio), ensuring the object "covers" the whole container (some part of the object can be clipped to make it fit)
• scale-down — behave like none or contain, whichever results in smaller object size (basically never scale-up).

<div id="object-fit-example">
  <img src="/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg">
</div>

#object-fit-example img {
  height: 200px;
  width: 300px;
  object-fit: contain;
  border: 4px solid red;
}

object-position

Sets the position (offset) of a replaced element inside its container.

Specify keyword(s) (e.g. left, top left, center), OR up to two lengths/percentages (e.g. 50% 50% or 10px 10px)

<div id="object-position-example">
  <img src="/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg">
</div>

#object-position-example img {
  height: 200px;
  width: 300px;
  object-fit: containe;
  object-position: 100px 20px;
  border: 4px solid blue;
}

Assets

• Andrew Ridley (Unsplash) — https://unsplash.com/photos/jR4Zf-riEjI

References

• object-fit (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• object-position (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/object-position