How To Create Truly Responsive Images With Flexbox by@guirecordon

How To Create Truly Responsive Images With Flexbox

May 11th 2020 6,723 reads
Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
How To Create Truly Responsive Images With Flexbox is a fast way of building a web page with responsive images. Flexbox grids are often built using images. The solution I'm about to show how you could build a Flexbox grid without images. You calculate the aspect ratio of the image smallest in height by dividing the height by the width. Then you center the image—margin: auto is necessary for our example to work. Then, you add a wrapper around your image container to make it more responsive setting width in percents.
image
Guilherme Recordon HackerNoon profile picture

Guilherme Recordon

Full Stack Developer

github social icontwitter social iconlinkedin social iconfacebook social icon

 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:

image
image

Remember our flex needs to wrap.

image

Our flex container should look something like that.

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

image
image
image

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

image

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.

image

That can also be written in one line.

image

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

image
image

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:

image

Open your devtools in your browser

image

Hover over the image

image

Our smallest image aspect ratio will be 119.8%

Then, you add a wrapper around your images.

image

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:

image

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. 

image

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:

image
image

image

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 following articles are very good if you want to expand on the topic of responsive images:

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!