How to implement such a mask with a picture?

Question

css

Hello, please tell me how to implement such a mask with a picture?
Better just with css.
The fact is that the size of the picture can be different, respectively, it can be stretched in different ways, I would not want to scatter all the elements on the absolute, because then there will be a binding to specific sizes.

Thank you!

Answer 1

If I understood the question correctly, then try the frame as a background in the adaptive block, and the girl as a picture in the center. Well, the minimum dimensions of the block also probably need to be set.

Answer 2

1) Just make a picture
2) Girl in the foreground - a frame on the back htmlbook.ru/css/z-index.
The png girl is
all in a div with center alignment. raise the girl a couple of pixels up so that the frame is visible