HTML Image elements can be resized to fit their containers using the object-fit property. There are a the following options:
fill- This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fitcontain- The image keeps its aspect ratio, but is resized to fit within the given dimensioncover- The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fitnone- The image is not resizedscale-down
In bubble, we aren’t able to specify how the image fits to it’s container. The only option we have is to maintain an aspect ratio, which is okay for some situations when the height of the image doesn’t matter, but sometimes it does like my use case here. The result is when I have a fixed height on an image, it looks really bad:
When I manually set the object-fit to cover using CSS:
As you can see, changing the object-fit of my image makes it look a lot better. I believe giving us the option to choose how an image fits to its container is big limitation.
Note: using a picture as a background image of a group is not always a perfect workaround and in my opinion is not an ideal way of handling images in a bubble app, for several reasons including SEO
