How to use flexbox with img's

Question

I am trying to produce a vertical stack of two images that scale with different viewport sizes. I wish that all images preserve their aspect ratio and use flexbox (not an absolute requirement but ideal).

Right now my HTML is like this

 <div class="fullwidth">
   <div class="verticalimages">
     <img src="http://placehold.it/500x600">
     <img src="http://placehold.it/500x600">
   </div>
 </div>

with CSS

.fullwidth{
    width:100%;
}

.verticalimages{
    display: flex;
    flex-direction: column;
    width: 33.3%;
    height: calc(33.3% * 600 / 500);
}

The width of the images scale accordingly but not the height. What am I doing wrong?

I have the code here:

http://codepen.io/anon/pen/Rrmyyd

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Using flex for images is, at least for now, a bad idea, as it has many flaws and bugs, so if you take that part out, you'll get something like this, that might be a solution for you.

If you still need flex, the recommended way is to wrap each img using a div.

.fullwidth {
  width: 100%;
}

.verticalimages {
}

.verticalimages img {
    display: block;
    width: 33.3%;
    height: auto;
}

<div class="fullwidth">
  <div class="verticalimages">
    <img src="http://placehold.it/500x600">
    <img src="http://placehold.it/500x600">
  </div>
</div>

edited May 23 '17 at 11:45

Community

1
1

answered Feb 19 '16 at 17:45

Asons

84,923
12
110
165

What about with flexbox? Is it possible to do it with display flex on verticalimages? – gota Feb 19 '16 at 19:15
@NunoCalaim Updated my answer with an explanation/linked resource. – Asons Feb 19 '16 at 19:49

How to use flexbox with img's

1 Answers1