Flexbox - Сделать изделие 16: 9

Question

У меня есть базовый контейнер flexbox с 2 предметами ..

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>

Следуя коду на Поддерживать соотношение сторон div с помощью CSS - Я пытаюсь сделать 2 элемента 16: 9.Но это не работает, как ожидалось.

Куда я иду не так?

Answer 1

Ваша проблема в том, что элементы img внутри дочерних элементов div изменяют высоту. Тогда дополнение накладывается сверху этого. Вы поймете, что я имею в виду, если уберете img.

Чтобы обойти это, вы можете добавить изображение как: background: url('imageurl'). Затем добавьте: flex-basis: 50% своим детям и вуаля!

Кто-то сказал codepen ?