I am new here so if I’m posting this in the wrong place I apologize. I am working on an app as a test. As a part of that I’m placing images on the page but I’m noticing that they don’t stretch (and there is no option for that). But one image in particular just cuts off as it gets smaller (and more is seen as it gets larger) which is not the behavior I’d expect based on how it would behave if I were doing this in html.
I’ve seen the integration of imgx, but that offers a utility to crop. My need is to have it stretch to the size of whatever I’m placing. Any help would be appreciated.
Thanks for the post and welcome to the forum! We’re thrilled you’re here.
For this, you’ll want to check out our run-mode rendering settings. (More on that in this entry from our manual) Specifically, these settings allow you to tell Bubble how to handle situations where the image doesn’t perfectly fit the box you’re displaying it in. You can have it stretch / zoom / crop etc.
Give it a look and feel free to reach out to us directly at Support@Bubble.io with any additional questions.
Thank you for the response Andrew! So I have been pulling my hair out trying to find why I don’t have the option you mentioned. Apparently that ‘run-mode’ option doesn’t appear on static uploaded images. Is there a way to get that capability on a static image?
I found another post that suggested attaching a static image to the image selector component and then using dynamic image to refer to the image selector. This does get me the options you mentioned and seems to be working. A bit of a hack but it works.
Another trick to try is to make the image the background to a group or a shape. Which gives some other things to play with regards how it displays and resizes.
Thanks for the reply! Yes, that’s correct. A simple way around this would be to have a ‘Resources’ option set or something similar where you store the image. Then you could dynamically reference it and get those options. Just keep in mind that option sets are public and wouldn’t be a good option if this image needs to be protected or kept private except for logged in users.
