i want to set an image’s height but let the width be set by the natural aspect ratio.
Instead, the width is getting set to 100% and making all my images look like weird rectangles.
I’ve been able to do this when I specify the width but not the height.
I’d like them to have fixed height rather than fixed width. But allow the width to automatically be determined by the height.
Just past the one-month anniversary of posting. Hope y’all don’t mind a bump in case someone knows?
Interesting that there’s no way to do this
It’s worth building a plugin around
Just built this out. Hope it helps
Ranjit from Atomic Fusion
Explore and reuse the community’s Bubble assets & Accelerate your Bubble development with Atomic Fusion
Does that need to download each element to get the dimensions, which I guess would mean you download each image twice, once to get size, then once on the page when you display it?
Definitely solves my problem though. I’ll have to see what the bandwidth effects are.
The image gets cached on first load, so it shouldn’t be downloading multiple times
You know, I finally had a moment to implement this and I’m realizing that images don’t have any place that allows you to dynamically set width and height. How were you intending to use the values that app that you built exposes?
var div = $('#myElement');
Can’t wait for dynamic height/width becomes a thing on Bubble.
And of course the next problem with Bubble is the lack of being able to assign a class to items.
I kinda feel bad for the developers, there’s so much opportunity to make Bubble better with fairly small changes, but… they can only do it one at a time.
Well there is a plugin that lets you do that, but it’s not the most reliable in my experience. I’d prefer just injecting CSS.
This JS that I mentioned above doesn’t need any classes to be assigned since ‘width’ and ‘height’ are default attributes that exist on the element. So simply running a code snippet like that along with the plugin on page load should do the trick for you!
Right, I would just need to add the ID to each item or use Classify.
Really what I’m realizing is that when you find yourself going against the grain of what’s easy in Bubble… stop.
Hi can I chime in?
I have a few questions about the implementation
- in the snippet there’s a line that references a div “#myElement” buy you said there’s no need for CSS so I’m a bit confused?
Without CSS would have been ideal, but there isn’t a way around it unfortunately.
So basically here are the steps
- Install ‘imageheight’, ‘classify’, and ‘java…’ plugin
- Add CSS ID to the image element
- Add the imageheight element
- On page load activate ‘run java…’
My follow up questions would be:
- Will I mess with the names of these variables <Plugin_height_value> <Plugin_width_value> or no need anymore
Thanks for replying so quickly btw
So the steps would be:
- Install the Toolbox plugin
How to keep an image's natural aspect ratio when setting height - #8 by atomicfusion
- Set the ID of the target element as “myElement”
That should do it
I can’t seem to get it to work
Here’s the imageheight element:
The Image element ID:
And the workflow snippet:
Here’s what’s resulting, it’s getting cut and what it should be is a full length of a page screenshot
So <Plugin_height_value> would come from the plugin via dynamic data - so it would look something like
ImageSize A's height_value
similarly for <Plugin_width_value>
Yeah I tried it too, unfortunately it doesn’t work also…
here’s the result