Как на flex cделать такой блок?

Question

[Bartf]

Нужно сверстать такую вот штуку. Фото и текст. Фото вставляю как img и оно растягивает блок. высота задана по 50% но по макету высота на 120px больше чем у меня. Как без костылей растянуть?

<div class="container">
    <div class="card">
        <div class="photo"><img src="img/photo" alt=""></div>
        <div class="info">    
text
        </div>
    </div>
    <div class="card">
        <div class="photo"><img src="img/photo.png" alt=""></div>
        <div class="info">        
        </div>
    </div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.photo {
  overflow: hidden;
  height: 50%;
  img {
    width: 100%;
    object-fit: fill;
    height: 100%;
  }
}

.info {
  height: 50%;
}

Но в строго в px задавать не ок, адаптивность тоже нужна

Comments

[WapSter]

Но в строго в px задавать не ок, адаптивность тоже нужна

как тебе пиксели мешают сделать адаптив? И еще, если тебе нужно, что бы изображение растягивало блок зачем ты применяешь к нему object-fit: fill;

[aftar]

покажи макет, и скинь код в песочницу

[Ankhena]

К вопросам WapSter я добавлю еще пачку:
1. Зачем флекс колонками для card, если внутри два дива, которые и так встанут в столбик?
2. От чего, по-вашему, браузер должен взять 50% высоты, если у родителя этого высоты не задано?
Если непременно нужно, чтобы блоки были одинаковой, но заранее неизвестной высоты, то используйте grid и единицы fr.

Answer 1

[Pavel-E-F]

Вот написано:
У .photo и .info height: 50%;
Сможете объяснить - высота 50% от чего? )))
У родителя высота не указана, у деда тоже. Значит height будет не 50%, а auto.