Как сверстать блок (адаптивно)?

Question

[Андрей Кузьмин]

Привет! Верстаю сайт резина + медиа и возник вопрос по реализации данного блока www.imageup.ru/img110/2999963/jjguyeshshht.jpg
Собственно, нужно чтобы картинка была резиновая а контент можно было поправить минимальным количеством медиа.
У меня 2 варианта:
1) Поставить картинку на фон блоку и задать background-size 100% и блок будет формировать высоту за счет содержимого ИЛИ
2)Картинку поместить в html и блоку с контентом задать position absolute?
Подскажите есть еще какие то варианты, и как из них самый правильный?

Comments

[Ankhena]

Это же не img, это оформление, значит фон (в крайнем случае фон псевдоэлемента, но не в данном примере)
Но не 100%, а cover.

[Андрей Кузьмин]

Ankhena, Проблема в том, что мне нужна именно резиновая картинка, чтобы уменьшалась вместе с блоком. При background-size: cover она ведет себя так, будто я для родителя задал высоту

[Ankhena]

Андрей Кузьмин, при cover она тоже будет уменьшаться вместе с блоком, но по другому принципу. Надо 100%, пишите 100%, это не принципиальная деталь плана.

Answer 1

[aloky]

<div class="container">
  <div class="row justify-content-between">
    <div class="col-md-auto"></div>
    <div class="col-md-auto"></div>
    <div class="col-md-auto"></div>
  </div>
</div>

Answer 2

[Алексей Орлов]

Картинку задать фоном с помощью background-size:cover;
Блоки при уменьшении разрешения экрана сделать в столбик. Получится 3 строки. При таком варианте получается минимум кода в media-запросе.