Fix your Images with one line of CSS

CSS object-fit to the rescue!

Photo by Ferenc Almasi on Unsplash

Have you ever fiddled around with the dimensions of your img tag only to be disappointed with the results? Have you ever tried to reuse some img component you made only to find that the img src is stretched or warped?

Well, have I got the solution for you!

Enter CSS object-fit — a cool CSS property that allows you to define how the img src will fit within the defined width and height of your img tag and its resulting content box.

object-fit has five values to choose from:

• none: The img src is not resized at all.
• fill: The default value for img tags. Sets the img src to fill the elements content box. The img src is stretched/warped when the img content box and src content aspect ratios aren’t the same
• contain: The img src scaled so that it fits inside the img content box while maintaining its aspect ratio.
• cover: The img src is sized to maintain its own aspect ratio. If the element does not fit inside the img content box then it is clipped.
• scale-down: The img src is scaled to the smallest possible sizing within the bounds of the img content box. This can be either the img src default dimensions (same as if you applied none) or the result of applying contain — whichever is smallest would give you a similar experience.

Find out more about CSS object-fit here: MDN CSS object-fit

I was recently looking at a website where everything was absolutely beautiful except for the Partners & Media section. The logos for each partner was stretched to fit the container and not really doing any justice to whatever hours of hard work the logo designer would have put in. Let’s checkout how object-fit can help.

Here is the default view where fill is applied. Notice how the all the logos are stretched. The logos for tech360, TNB Venture and Residences Singapore are exceptionally noticeable

Here is that same view but with contain applied. Now we can see a more true-to-fit representation of the logos as intended with respect to the img content box.

Here’s how it would look when cover is applied. All the logos are trying to fill the content box of the img tag with tech360 getting clipped at the center.

Here’s how it looks with scale-down applied. Notice how each logo is as small as possible. In some cases the logos are the same size as if contain were applied. In other cases they are closer to the size when none is applied.

Finally, here’s what none looks like when it’s applied. This allows each logo to size to its default dimensions.

Well, that’s all for this one folks! If you liked the article please leave a clap (or two) and a comment.

Thanks for reading and good luck on all your coding adventures!