Object-fit not affecting images

The 'how-to' guide

Tick the checkbox: container dimensions

object-fit can be tricky and it requires specific conditions to shine. One tricky bit is the parent container: when you're using width and height in percentages, they need a parent with defined dimensions - your img tag needs a mom and dad, essentially.

.parent-div {
  width: 200px; /*parents*/
  height: 200px; /*suitable for percentage based babies*/
}
.child-img {
  width: 50%; /* takes only half the space, because it respects its parents */
  height: 50%; 
  object-fit: contain; 
}


Mind the little/big obstacles

‘Houston, we have a problem… or maybe more.’ Be aware of the max-width property or some inconspicuous surrounding elements which could interfere with your object-fit progression. CSS is known to have an attitude sometimes.

img {
  max-width: unset; /* kick max-width out of the picture */
  height: auto; /* preserve aspect ratio, keep it classy. */
  object-fit: cover; /* we're all cover models here */
}


Battle the 'whitespace' monsters

Keep an eye out for mysterious whitespace that may creep up beneath your images due to their inline-block behavior. Vanquish it with the vertical-align property set to bottom or middle.

img {
  vertical-align: bottom; /* because nobody likes extra space in their design */
  object-fit: cover; /* you're the cover of my book */
}


Flexbox: Your alignment sidekick

Flexbox is like your best friend - always there when you need to align things up nicely.

.parentContainer {
  display: flex; /* Let's flex */
  justify-content: center; /* Horizontally centered, just like my life goals */
  align-items: center; /* Vertically centered, reaching the height of success */
}


Mastering object-fit

Say hello to 'object-position'

With object-position you gain control over the clear visual focus of the image. Think of it as googly eyes for your object-fit clown picture.

img {
  object-fit: cover;
  object-position: center top; /* Behold! The center-top attraction! */
}


Always fashionably responsive

Maintain that style while being responsive. Use the max-width and height: auto properties to ensure your image fits any party it goes to.

img {
  max-width: 100%; /* because exceeding boundaries is not cool */
  height: auto; /* maintains proportions for a classy look */
  object-fit: contain; /* fits just right, like goldilocks */
}


Browser compatibility and fallbacks

Like all cool things in life, object-fit is not universally supported. Always check browser compatibility. When in doubt, use a polyfill like object-fit-images as your fallback knight in shining armor.