How to link blocks to an image?

Question

css

Hello! Many times I faced a similar problem, but this time I decided to try asking the community. How experienced specialists cope and what is used to implement blocks as shown in the screenshot, while making it adaptive. The bottom line is that when you reduce, increase the screen, the picture is stretched, narrowed. Therefore, then she climbs on the text and the like. So far, I've only dealt with this and other similar cases by making this image absolute. Next, depending on the media query, I change the size and position of the image. But that doesn't seem right to me and I'm missing something. How would you implement such a block?

Answer 1

I answer a specific question " How would you implement such a block? "
I would implement all the images in one div, and only then its rules in the media query proportionally.
But since when the screen is reduced, the movement / position of the pictures will no longer be entirely appropriate to indicate in pixels (because it will turn out to be different sizes than on a PC), I would do it as a percentage.
Roughly speaking, you first throw everything into the block. There you do all the movement / overlays that you need in% from each other, and then on the mobile phone you proportionally reduce it all.
Look how the first block is made here , in my opinion it is very similar to your request.