CSS Flex-Fit Image Container for Vue

Using some CSS tricks & the img element you can fit any icon or image intuitively into the frame you want

Marcus Smith
Feb 19 · 3 min read
Photo by pine watt on Unsplash

TL;DR:
+<img :src=”imageVal” alt=”img” class=”image-fit”/>
+.image-fit{ height: 100%;width: 100%; object-fit: cover;}

Intro:

This is a short one. I was playing around with user icons for my web-app and couldn’t quite decide the best way to get any image size (no cropping necessary) to peek through whatever frame I gave it. I wanted it to be simple, clean and just work. I believe I have finally landed on the cleanest solution, but if you feel otherwise please feel free to say so in the comments. Hopefully this saves someone the time I spent messing around with it.

<img/> + :src — Injecting Your Image

If you are using Vue, you will probably want to use one element to display any image you throw at it. There are a couple ways to put an image into a page, but the <img/> element is the most suited for it and most straight forward. All you need to do is dynamically set the image source by defining :src with a prop, computed value or data variable. Something like this:

Now, as long as you give it a valid url, it will render your image. So simple you probably already knew this. But this is someone’s face or an important image you are trying to display, you don’t want it to be out of proportion and you don’t want any ugly white-space around it. That’s where the image-fit class comes in.

image-fit Custom CSS

If you go surf the internet you will find all types of input on how to get images to size right. In all my searching I have never found this solution. The key to this trick? Use object-fit to attempt covering the image, then constrain the height and width to get as close to the frame size without going under. This also preserves aspect ratio:

If that CSS is on your img element like I have above, it will make sure your high-res image fits any box you give it. Of course, this will crop off parts of the image, but that is obviously necessary if you are putting a square into a circle. This solution renders correctly in Chrome, Safari & Firefox. It may not seem intuitive, but the browsers understand this combination of constraints to be exactly what the mortal(me) wants.

The Result

I give you a bad aspect-ratio photo, you can still work with it

That’s All Folks

I usually try and make more substantial articles on more complex concepts, but I realized that this simple concept can still be a sticking point. Feel free to ask me for other similar solutions and I can see about putting stuff together on those. If this seems like a lower quality version of my work… It’s because it probably is. I wanted to write it up real quick but am trying to nail a deadline. As always your interest, input, and appreciation are always appreciated.

Keep on coding the world;

-Marcus

JavaScript in Plain English

Learn the web's most important programming language.

Marcus Smith

Written by

Entrepreneur | Software Engineer | Adventurer

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.2K

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade