Change height of image responsive design

Is there a way to get an image that has been cropped to a specific ratio to have the height and width change for responsive design?

I want the image or group ( with image as background ) element to change both height and width so the ratio of the image remains the same throughout the expansion or contraction of page width.

1 Like

@boston85719 Did you figure out any solution to this?

Yes, there is a checkbox on the image element I had been overlooking for a long time…it is to keep the image proportions and when the page width changes the size of the element changes.

Screen Shot 2020-12-11 at 12.57.44 AM

You need to uncheck the fixed width to see this option

1 Like

I guess my problem is a bit different than yours. I want my image size to increase/decrease only if size of another/outside group increases/decrease. Hope it makes sense otherwise would be happy to send pic via PM.

How are you changing the outside group? My assumption is through responsive design that is changing the size based on page width…so if you use that checkbox, it should change the image element size when they outside group changes.

But, yeah, feel free to send some screen shots.

1 Like

Is there a way to set a group’s height as a percent of the width?

I don’t know if Bubble ever implemented the feature to keep an aspect ratio on a group. This is a feature of an image element, but not sure if it is of a Group.

You may add that to the idea board if it is not a feature.

You can also use a plugin like dynamic width and height, there are a couple on marketplace, one of which I know is very well built (I built it)…these would allow you to set the height or width of an element using a dynamic expression which could be a calculation as a percentage of an element’s width