Pothibo

Control how your image looks with object-fit

Rainy Sunday are perfect for blog posts and add that to the fact that I've been wanting to write about object-fit for a week, I didn't have to motivate myself that much to get down to write!

So what the hell is object-fit? The idea of that CSS rule is to apply the same image transformation that you can do with background-image to an image tag.

Images on the web

Images are everywhere and yet and to help developers, browsers have implemented different way of displaying them on the web. Of those, CSS background is probably the most powerful tool that is available to us today. For example, if I would like to have an image fill a container's space I could do something like this:

index.html
<header id="MyContainer"> <h1>Hello World!</h1> </header>
main.css
#MyContainer { background-image: url('my/image.jpg'); background-size: cover; }

This way, the browser will make sure that the image expand to take the whole width and height of the container, no matter how big or small it is.

And this is very useful. I use it all the time. But the problem with this solution is that you can't use dynamic images with your CSS since it's compiled and static.

However, I often need to do just that. One trick I discovered a while ago is to create inline CSS style for those dynamic images.

index.html.erb
<header id="MyContainer" style="background-image: url('<%= @post.header.url %>');"> <h1>Hello World!</h1> </header>
main.css
#MyContainer { background-size: cover; }

But sometimes, I want to use an actual HTML element to display the image. One reason that comes to mind right now is situation where I want the image to have it's own size. I want it to be displayed above some text and I want the CSS to size the element instead of using padding to indirectly size the image.

Profile cards could be an example of that. With object-fit, I can handle the same cover rule that CSS provides for background images.

A basic card

To show you how well this can work, here's a profile card.

profile.html
<div class='Profile'> <img src='http://placekitten.com/800/600' /> <p>The Boss</p> </div>
profile.css
.Profile { width: 300px; overflow: hidden; } .Profile img { width: 100%; height: 400px; }

See the Pen WxVKQw by Pier-Olivier Thibault (@pothibo) on CodePen.

Notice how unusable the cat is on that page right now. The main issue right now is that the image inside didn't keep its aspect ratio. Object-fit can solve this (If your browser supports object-fit, the image will be fixed).

profile.html
<div class='Profile'> <img src='http://placekitten.com/800/600' /> <p>The Boss</p> </div>
profile.css
.Profile { width: 300px; overflow: hidden; } .Profile img { width: 100%; height: 400px; object-fit: cover; }

See the Pen pbrkgR by Pier-Olivier Thibault (@pothibo) on CodePen.

This looks much better. However, when I have to care about IE, I don't have a choice. I have to fallback to the inline styles.

profile.html
<div class='Profile'> <img style="background-image: url('http://placekitten.com/800/600');"/> <p>The Boss</p> </div>
profile.css
.Profile { width: 300px; overflow: hidden; } .Profile img { width: 100%; height: 400px; background-size: cover; background-position: center; }

See the Pen zBgLBR by Pier-Olivier Thibault (@pothibo) on CodePen.

Get more ideas like this to your inbox

You will never receive spam, ever.