From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Fitting an image inside flexbox

Fitting an image inside flexbox

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Fitting an image inside flexbox

“

- Fitting images inside flexible boxes or flex box or display flex boxes works a little bit differently from what we've looked at previously. So let's take a closer look at flex in particular. This example is the same example we used for grid. I have four images with different proportions, different heights and different widths and I'm going to display them this time in a horizontal line of four images. To do that, I'll first grab the content container, that's the one that wraps around everything and set its display to flex. This creates a flexible box that flexes based on the intrinsic size of its elements. And as a result we get horizontal scrolling because these images are huge. To fix that, I need to go into the individual images and set their width because that way the flexible box will scale to their width. And that means if I want to fit four across the view port, I need to set their width to 25%. That will give me…

Contents