CSS Quikie: Object Fit

Content, content, content! That is a big buzzword on the internet today. From written, images(memes), all the way to video, the internet is run by engaging content. With that in mind, ensuring how said content is displayed is incredibly important. Web applications are displayed fully fluid today, needing to anticipate any viewing size under the sun. On top of that, respond accordingly as well!

To help with things on the image and video element side, we have the object-fit CSS property. This is a property that helps define how replaced elements, video, and image tags as examples, fit according to their parent element. For a familiar comparison, think of how background-size works with background images.

But enough talk, let’s look at some code!

.ContentBlock {
  width: 300px;
  height: 400px;
  position: relative;
}

.ContentBlock img,
.ContentBlock video {
  height: 100%;
  width: 100%;
}

.ContentBlock .FitFill {
  object-fit: fill; 
  /* Fills parent element */
}

.ContentBlock .FitContain {
  object-fit: contain; 
  /* Fits inside parent element, */
  /* while maintaining aspect ratio */
}

.ContentBlock .FitCover {
  object-fit: contain; 
  /* Fills parent element, 
  /* while maintaining aspect ratio */
}

.ContentBlock .FitNone {
  object-fit: none; 
  /* No resizing is done */
}

.ContentBlock .FitScaleDown {
  object-fit: scale-down; 
  /* Fits element inside element by the smallest option */
  /* between none and contain */
}