How to lay out a block (adaptive)?

Question

css

Hey! I'm building a rubber + media site and a question arose about the implementation of this block www.imageup.ru/img110/2999963/jjguyeshshht.jpg
Actually, the picture should be rubber and the content could be corrected with a minimum amount of media.
I have 2 options:
1) Put the image on the background of the block and set the background-size to 100% and the block will form the height due to the content OR
2) Place the image in html and set the block with content to position absolute?
Can you tell me if there are any other options, and which one is the most correct?

Answer 1

<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

Set the image as a background using background-size:cover;
Blocks when reducing the screen resolution to make a column. You will get 3 lines. With this option, you get a minimum of code in the media query.

Answer 3

https://codepen.io/topicstarter/pen/QQVBNG so it seems, just don't forget to insert the tag viewportand change the icons to your own ...