Как сверстать этот блок?

Question

[mindx]

Учусь на бесплатном макете, и впал в ступор...
Нужно сверстать адаптивно этот блок:
Чтобы сделать разные bg у каждого блока, я добавил классы feedback-block-left/right, дальше сделал блок с постом и картинкой inline , но картинка никак не хочет расширяться по высоте и ширине блока...
https://codepen.io/Mindx/pen/oqgRQB
Что делаю не так? Чем дальше тем больше запутываюсь....

Answer 1

[tyzberd]

display: flex для блоков с шириной 50% и минимальной высотой.
Внутри одного текст, в другом картинка через img или background. Если картинка object-fit: cover;, если фон background-size: cover;
Для моб через media меняем когда нужно ширину блоков на 100% и можно еще порядок поменять с помощью order, что бы была сначала картинка потом текст.

Comments

[mindx]

Да я думал, через медиа вообще убрать) Щас попробую сделать, спасибо!

Answer 2

[Ольга Ветер]

Возможно не лучшее решение, но я бы делала так:
веделила два блока, верхняя строка / нижняя строка. У верхнего блока бэкграунд черный с картинкой по url, спозиционированной вправо, занимающая 50% блока, внутри блока контейнер с контентом, там уже по сетке как делаете, так и располагайте. У нижнего то же самое, только фон белый, картинку позиционируете влево, также внутри контейнер с контентом уже по сетке.

если что-то будет не получаться, картинки можно отдельным абсолютами повесить, с позиционированием относительно строки top: 0, bottom: 0, right: 0, left: 50% для верхнего блока, и то же самое для нижнего, только left и right наоборот.