I was having issues trying to get images I created that have a set ratio to be responsive. It seems in native bubble it is not possible, as there is not functionality at present that is to ‘keep ratios on page width change’ meaning you can’t have the height and width of the image element change to maintain the ratio of the original element.
So the workaround I implemented is to use three groups to approach this.
I have a group that contains another two groups. One of the other two is a spacer set to never be visible and to collapse height when not visible. The second group is set to have an image as the background type ( I don’t know why I did it like that instead of using the image element ).
The spacer group makes it so the gap is removed and all content below is ‘moved up’ when the image height changes.
So my images don’t actually change dimensions at all, I just hide and show them based on current page width and use the spacer so that my content below is responsive to the change in height.
In the gif above you can see how it responds to page width changes. Some of my images I have centered inside of the group instead of moving up the page. This is because the group they are centered in is the same image, but with blur effect.
I use conditionals to change the groups ID attribute to change the image from normal to blurry before another smaller image is installed in the center.
I personally felt this made a bit more interesting look rather than empty space or a flat color.
Hope it helps somebody else who is struggling with getting top images to display in a visually appealing way.
By the way to set up the image as a group
Make sure to center and make as wide as parent element