Image as Child Element - Flexbox Help

I have two images in a row that should each occupy 50% of the screen width. However, when using flexbox the images shift themselves so that 50% of the image of each is displayed off screen, since the images aren’t being scaled down. Can anyone help me with this?

Here is my public share link: LINK
(how to access public share link)

Can anyone help with this?

@brryant @bart @sabanna @PixelGeek

You have to give your image 50% width, or put it in a container div at width 50%.

I looked at your page an on this section nothing has a dimension, HTML can’t figure that for you, so it takes what he has: the height of the image, and respect that. And Flexbox does what you tell him: shrink the box.

Okay, thanks @vincent. I was just hoping Flexbox could correct that without having to do style the image!

I gave you an incomplete answer.

Flexbox is a way to align, order and distribute containers in space. An image with no dimensions won’t be resized by Flexbox itself.

So to achieve what you want without giving dimensions to anything, you need to remove the class on your image, put each image in a div and put the image class to the divs. Then it works as expected: both divs are 50% and the images inside resize automatically.

http://vincent.polenordstudio.fr/snap/h3aar.jpg


http://vincent.polenordstudio.fr/snap/jd4pn.jpg

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.