Как обрезать фото только снизу?

Question

[sergei179]

(Верстка сайта)

Всем привет!
На странице есть круглый блок с заливкой зеленого цвета. Внутри блока есть фото png, которое по высоте больше основного.

Нужно что бы фото внутри блока обрезалось только снизу по контуру основного блока.
overflow: hidden не подойдет, он обрезает по всему контуру фото.

Пример на фото :)

Comments

[sergei179]

Единственное что удалось придумать сейчас - завернуть эти 2 блока в обертку, ей задать снизу бордер-радиус и обертке задать потом overflow hidden.

Не баг, а фича

Answer 1

[Андрей Мартынкевич]

Можете попробовать установить фото position: absolute и bottom: 0 и выровнять по центру используя left: 50% и transform: translateX(-50%).

Comments

[sergei179]

Тогда все равно фото не обрезается, оно просто идет в самом низу.
Пока что одно решение придумал, написал его в комментариях к своему вопросу