You are currently viewing CSS Trick: How to Object-fit an Image inside its Container Element in the Open Event Front-end

CSS Trick: How to Object-fit an Image inside its Container Element in the Open Event Front-end

I came across this piece of css when the Nextgen Conference Logo on eventyay home-page had its aspect ratio not maintained. As you can see in this picture that the image is stretched to fill in the parent container’s size.

The CSS behind this image was:

.event-holder img {
    width: 100%;
    height: 165px;
    border: none;

Let’s see how object fit helped me to fix this problem.

What is object-fit ?

The object-fit property of an element describes how it is fitted or placed inside its container element. This container box has its boundaries defined by the max-height and max-width attribute of the object in question.
In the html code for the above logo we had:

img {
    width: 100%;
    height: 165px; 

The object in this example is an image ( img ) which is to be fitted inside a box of height 165px with 100% width.

The object-fit property can refer to any element like video or embedded item in the page, but it’s mostly applied to images.

object-fit provides us with fine grained control over how the object resizes to fill inside its container div. Essentially object-fit lets the image ( in this context, but can be applied to any object ) fill the box withmaintaining aspect ratio and/or filling up the entire area established by height and weight.

Here’s a short example for different values of this attribute:
( The image
 used here is a 4096px*2660px image, placed inside a div of height 100px and width 300px. )

  object-fit: fill
   src="download.png" class="fill"/>
  object-fit: contain
   src="download.png" class="contain"/>
  object-fit: cover
   src="download.png" class="cover"/>
  object-fit: none
   src="download.png" class="none"/>
  object-fit: scale-down
   src="download.png" class="scale-down"/>

img {
  width: 300px;
  height: 100px;
  border: 1px solid yellow;
  background: blue;
.fill {
  object-fit: fill;
.contain {
  object-fit: contain;
.cover {
  object-fit: cover;
.none {
  object-fit: none;
.scale-down {
  object-fit: scale-down;

As from the above illustration, it is evident that what I needed to fix aspect ratio on home page was to use object-fit: cover. We got this result by just adding one line of code. Here’s the final CSS:

.event-holder img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    border: none;


And the final image, which is pleasing and aesthetic:

Quick cheat-sheet for object-fit values


  • stretches the image to fit the content box
  • aspect-ratio disregarded


  • increases or decreases the size of the image to fill the box
  • aspect-ratio preserved


  • fill the height and width of box
  • aspect ratio preserved
  • often the image gets cropped


  • height and width of the container box ignored
  • image retains its original size


  • image takes smallest concrete object size between none and contain

Additional Resources

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.