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.
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.
