Hi,
I have an app where users upload profiile pictures that have more height than width. Like this one:
And in a square image element with 100 rounded borders and “Rescale” run-mode rendering, this image looks like this:
But I would like it to look like this:
How can I make this possible?
Thanks in advance 
Try setting the border roundness to 360
I would even go for 9999999 roundness
I think the image will need to have a square aspect ratio in order for the rounded-border result to be a circle. Thus, it will either need to be cropped, or if you can somehow position it within a square container and then round the borders on the container, it might work. I haven’t tried the latter, so you might have to tinker.
Thanks, @lantzgould and @johnny,
But the problem I think is not the roundness, it´s the aspect ratio, as @sudsy says.
@sudsy, what do you mean with:
Thanks again
You could do the following, but it’s not going to behave the way you want / expect. The group will not maintain aspect ratio for different viewport widths.
Imgix would be great for this; it can even recognize faces and crop so that the face is centered. However, Bubble doesn’t officially support Imgix URL tinkering with its native integration, so you’d be better off getting your own Imgix account.
But I forgot that there is a built-in circle and face cropping option. Check out :processed with Imgix in the expression builder. Definitely worth experimenting with that first.
Great, thanks, @sudsy.
This topic was automatically closed after 70 days. New replies are no longer allowed.
