How to lay out a block with a picture with cut corners so that the background is an image at the bottom?

Question

css

Hello, the whole difficulty is to cut the corners of the block with the picture inside and so that the background with the image is visible adequately.

- The block with the picture increases in height depending on the text on the left, the larger the text, the greater the height of the picture. The text can be any number.

- The image is added via img src - this is the standard way to add it in all engines from the admin panel.

- The background of the block is set via css background in the css file, which is also a pretty standard trick.

1. It is necessary that the corners of the block with the picture be cut off
2. It is necessary that the slope of the corners does not change when the height of the block with the picture changes.

Here is the markup that should be

https://codepen.io/ikles/pen/rNOQgZx

Design attached

Answer 1

Maxim Lensky demonstrated the answer to the question. Mask for the picture: it is embedded in the document and applied as needed.
And in order not to always be beveled the same way when using different images, you need to add a script that will generate this mask path based on the conditions multiplied by the image size ratio.

Answer 2

Alternatively, you can do this https://codepen.io/klimsava/pen/pojQBRa

Answer 3

Option without mask and svg on pure css