Fixed Width Image Scaling on Smaller Screens

[advantadm]

Hello Bubble Community,

I’m currently working on a project where I have a page with a fixed width image. However, I’m encountering an issue when the screen’s width becomes smaller than the image’s width. The page starts to zoom out, which results in a rather odd appearance.

What I’m aiming for is to maintain the image’s width constant, and when the screen gets smaller, the image should simply get cropped at the edges (i.e., the corners get cut off) instead of the entire page zooming out.

Is this possible to achieve within Bubble.io? If so, could anyone guide me on how to implement this? Any help or direction would be greatly appreciated.

Thank you in advance for your time and assistance.
Best regards,

Mathias Kragh

[sideswapper]

Hey Mathias,

I believe this should happen normally, I did a quick test to check it out and the when the screen width is bigger than the image, the image gets cropped rather than the entire page zooming out, here is a recording:

[advantadm]

No I want the image to keep the same ratio and width while the screen gets smaller. Like in this image where the sides gets cut off.

[nico.dicagno]

Remove fixed width and enable fixed height.
Set the max width of the image to the width you’ve been using. Fix the height to the height of the image when width=maxwidth.
On the datasource, after the image source, add :processed with imgix and check ‘resize to fit dimensions by cropping’
Then set the runtime rendering to Zoom.