Flexbox - Make item 16:9

Question

I have a basic flexbox container with 2 items..

html, body {
    margin:0;
}

.container {
    display: flex;
    flex-direction:row;
}

.item div {
  width: 100%;
  padding-bottom: 56.25%;
  background: gold;
}

img {
    max-width:100%;
    object-fit:cover;
}

<div class="container">

<div class="item">
<div>
<img src="https://placeimg.com/1000/1000/any/grayscale">
</div>
</div>

<div class="item">
<div>
<img src="https://placeimg.com/1000/1000/any/grayscale">
</div>
</div>

</div>

Following the code at Maintain the aspect ratio of a div with CSS - I am trying to make the 2 items 16:9. But it is not working as expected.

Where am I going wrong?

Shouldn't the width be 50%? And why have you added extra divs? — Paulie_D, May 16 '18 at 14:00
The browser you're using makes a difference (although possibly not for much longer). https://stackoverflow.com/q/36783190/3597276 — Michael Benjamin, May 16 '18 at 15:42

score 1 · Answer 1 · answered May 16 '18 at 14:33

Your problem is that the img elements inside the child divs are altering the height. Then the padding is being applied on top of that. You'll see what I mean if you remove the img.

To get around this, you can add the image as: background: url('imageurl'). Then add: flex-basis: 50% to your children and voila!

Did someone say codepen?

Flexbox - Make item 16:9

1 Answers1