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

Question

[leeroyjenkins176]

Как можно вписать прямоугольное фото в круг, при этом чтобы верх не обрезался?
Нашел такой пример https://stackoverflow.com/a/68626873, но там высота фото и круга одинаковые. В моем же случае фото чуть выше, из-за этого радиусы не свопадают.

Comments

[leeroyjenkins176]

Ankhena, круг 420, чуть больше. В любом случае этот пример не работает для случаев, где фото должно быть выше круга.

[Ankhena]

leeroyjenkins176, круг можно рисовать чем угодно, градиентом или псевдо. И прибить к низу.
+ border-radius у обертки как в примере.
Или можно универсально заменить на 0 0 100vmax 100vmax

Что именно у вас не работает?
Сделайте пример на codepen.io

[Антон Антон]

а что, круг должен менять цвет? может просто изначально сделать картинку с прозрачностью в нужных местах?

[leeroyjenkins176]

Ankhena, все оказалось гораздо проще. Круг на фоне плюс border-radius: 0 0 95px 95px; для самого фото. Я только сейчас обнаружил, что скругление в форме круга можно получить, указав значение в пикселях, а не процентах (до этого радиус в 50% давал форму овала, так как изображение не квадратное.)
Остаслось выяснить формулу, почему нужно указывать именно 95 при ширине фото 118

[sergski]

удалите фон картинки и сдедайте его бэкграундом

[leeroyjenkins176]

Я изначально пошел не по тому пути, предполагая, что тут без overflow для круга не обойтись.

[leeroyjenkins176]

Антон Антон, можно, но я решил заморочится. Плюс хорошо, если будет возможность замены фото без необходимости использовать графический редактор для подготовки новго фото

[Ankhena]

leeroyjenkins176, при ширине блока 118 достаточно 59. Ширина фото не имеет значения.
Либо любого другого размера больше.
Универсальный вариант я написала выше.

[Антон Антон]

leeroyjenkins176,

замены фото без необходимости использовать графический редактор для подготовки новго фото

судя по фото, его все равно нужно будет использовать

Answer 1

[Виталий Першин]

Накидал на скорую руку, один из вариантов:

Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.