Framing an image of changing size

Hello all!

I am trying to style an image with borders, rounded corners etc’
The problem is that the image is inputted by the user, so it is of changing size. If it is smaller than the max width allowed by the image element it looks like bubble will still make the element take up the max width it can and thus rounded corners and borders are framed around the bigger element frame instead of just around the image, which looks bad.

I have even tried resizing the image element with javascript but bubble seems to automatically resizing it back after my JS runs.

Any advice?

Bubble lets you decide whether to stretch / expand.

You also can resize the actual image when user uploads it.

Are you talking about rescale/zoom/stretch?

Rescale seems to be the only option as zoom will take away part of the image and stretch will distort it.

As for resizing - I am resizing the images. But there is no way of foretelling what will be the final size. As the images the users input vary in size and resizing to a fixed width will distort the image.

This topic was automatically closed after 70 days. New replies are no longer allowed.