How to make responsive image background and responsive border-radius?

Question

css

codepen.io/anon/pen/JbELrq
I want to make an adaptive .inner so that the picture along with the rim decreases and increases depending on the resolution, while the border-radius is not distorted and the bg of the picture does not float away to unknown edges

Answer 1

Because you have it position: absolute, I see only the only option
When the block reaches the right edge, through media queryleftreplace with right: 0. Then, when the left edge of the container starts to enter the block, again set the block width 100%and left, right = 0 through the queue. It should work. And the height can be done through vw.

Answer 2

1. border-radius is set in %% (for a circle - 50%)
2. Positioning a block of unknown width in the center:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3. Resizing according to the screen is @mediarequests