How To Create Truly Responsive Images With Flexbox

 If you're trying to learn CSS Flexbox, I bet you've spent some time watching a few tutorials on YouTube. Maybe you've seen the Wes Bos series, that’s a great one. Maybe you're bi-lingual and found some helpful content in your native tongue. Most technical content on the internet is in English, as we know. Yet, sometimes I find some amazing content in my native Portuguese. (Like this remarkably simple to understand tutorial on Flexbox). Finally, how can you not have resorted to the Interneting Is Hard tutorials?

 I have, however, ran into a problem with most of the tutorials I've seen. They'll teach you how to create these wonderful responsive grids using nothing but... boxes. That's fine, of course, because responsive images can be a topic on its own. But Flexbox grids are often built using images.

Even when I found tutorials that used images, the images were all the same size. That's great if you can work with images that are equal in size, but that's not always the case. And even if it is the case, this technique that I'm about to show might still come in handy.

First, let's take a look at how you could build a Flexbox grid without images:

Remember our flex needs to wrap.

Our flex container should look something like that.

Now, let's try to add some images that are equal in size:

We can make it even more responsive setting width in percents. Like this:

I added a max-width and centered the content using margin auto.

Don't forget to discount the 10px from both margins. Flex-grow and shrink make sure our images' sizes will always change proportionally.

That can also be written in one line.

Finally, let's see what happens if we try to add images of different sizes:

As you can see, that's starting to look not so great. So, how do we fix it? First, an important disclaimer. The solution I'm about to show you is a fast way of building a web page with responsive images. The topic of responsive images can be extensive.

It usually involves things like page loading time. That can have an impact on your SEO rankings and user experience. I'll reference some articles at the end if you want to dive deeper into the subject, but, for now, here's how you do it: 

First, you calculate the aspect ratio of the image smallest in height. You do that by dividing the height by the width:

Open your devtools in your browser

Hover over the image

Our smallest image aspect ratio will be 119.8%

Then, you add a wrapper around your images.

That's important because you don't want your image container to be a flex wrapper.

Your image wrapper is not going to have a height, only a padding-top or padding-bottom, you decide. That padding-top or bottom will take the aspect ration we just calculated.

Like this:

The position of the image wrapper will be relative since the image will be absolute. Finally, you will set the position of the image to absolute. Then you center the image—margin: auto is necessary for our example to work. 

That was it for the first row. But we have an image even smaller on the second row. We can either readjust the aspect ratio of all our boxes or just for the ones on the second row. It's up to you. I'll go for the second option.

Take a look:

Voilà!

That's it. Have fun!

Resources:

I learned the trick I just demonstrated with this amazing article. The author calls it 'the Netflix way':

• the Netflix way by Adrien Zaganelli

• How to calculate the aspect ratio

The following articles are very good if you want to expand on the topic of responsive images:

• Learn HMTL multimedia and embedding responsive images
• CSS Tricks responsive images
• A complete guide to responsive images
• Renponsive images - An Event Apart
• Automate your responsive images with mobify-js