CSS object-fit to power up your markup!

Let’s talk about another new-old feature — object-fit, which I find extremely useful.

It is a popular case — show rounded avatar taking into account that original image may have weird aspect ratio, like this:

Adorable Simon’s cat has own Youtube channel. Be careful — very cute, can’t resist watching all series at once!

The easiest solution is to use <img> tag with equal width and height and set border-radius of each side to 50%. This solution means you don’t care about result and you do realize, that avatar can be distorted if image has non-square proportion:

<img src="http://bit.ly/2heoc2H" alt="Simon's cat" width="200" height="200">
// and CSS 
img {
  border-radius: 50%;
}

For landscape image we will get something like this in result:

Common way to make this right is wrap image and center it inside of a wrapper. But then you will need to check, whether image is in landscape or portrait mode, because this will actually determines how image must be centered — horizontally or vertically? This solution will require JS. Too much work. I might be wrong, though. If I am, please poke me in comments ;)

Another way is to use CSS background-image and background-size properties. Let’s take a look:

// I assume this snippet is going to be used in a dynamic template,
// so no hardcoded image URLs in CSS code.
// Inline styles, when needed, are not that horrible ;)
<figure style="background-image: url('http://bit.ly/2heoc2H')">
  <img src="http://bit.ly/2heoc2H" alt="Simon's cat">
</figure>
// and CSS
img {
  width: 100%;
  height: 100%;
  opacity: 0;
}

figure {
  height: 200px;
  width: 200px;

  border: 1px solid black;
  border-radius: 50%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Result looks pretty okay if taking into account bad aspect ratio of original image:

You may check Codepen for this solution

It seems, we can skip <img> tag, as all magic happens inside of <figure>. The reason, why we still keep image element, is because we are trying to implement an avatar and avatar is about image. CSS property background-image doesn’t give us a physical image, so from semantic perspective it is correct to have actual image element in our markup. Another point, you can’t save image using right mouse click as, again, background-image is just a visual effect (right click on image element brings context menu with option “Save image as…” which is really nice to have).

So many efforts to implement so simple thing. It shouldn’t be like that, right? Good news! With not that new, but finally supported by majority of browsers, CSS feature object-fit it can be accomplished within one line of CSS code:

<img src="http://bit.ly/2heoc2H" alt="Simon's cat" width="200" height="200">
// and CSS
img {
  object-fit: cover; // magic goes here

  border: 1px solid black;
  border-radius: 50%;
}

And result will be exactly the same as when using background-image property:

You may check this example here

Really powerful feature, it has several values: none, fill, contain, cover, scale-down. The difference between them you may check at MDN article. To have a quick look, here is a Codepen from the article:

The main problem, it is not supported by IE11 and Edge. It means, if you care about Microsoft users, you will need to detect object-fit feature support and add workaround in case of a fail. About feature detection and @supports directive you can read in my previous article.

Nevertheless, give object-fit a try and stay tuned — lot’s of great stuff happens in the web world these days. If you found a mistake or maybe you know a better solution for rounded avatar, please don’t hesitate to leave a comment, I will appreciate your support.

Thank you for staying with me until these words ❤ I like to chat, so looking forward to hearing from you. Happy CSS coding!