How to crop photo only from the bottom?

Question

css

(Website layout)

Hello everyone!
There is a round block with a green fill on the page. Inside the block there is a png photo, which is larger than the main one in height.

It is necessary that the photo inside the block is cropped only from below along the contour of the main block.
overflow: hidden won't work, it clips around the entire outline of the photo.

An example in the photo :)

Answer 1

You can try setting the photo to position: absolute and bottom: 0 and center align using left: 50% and transform: translateX(-50%).