Forum Academy Marketplace Showcase Pricing Features

Can anyone achieve this? I want an image to be always aligned top and make the image shrink if the image has specific aspect ratio

Hi Bubblers!
Bubble is definitely a great tool but sometimes easiest thing can’t be done… I’m just trying to make an item page for a T-shirt printing service but no matter how I tried bubble won’t let me achieve what I want.

Actually, this is a question but I’m rather suspecting it’s a bug. Whoever can tell me what this is then please advise me, I will be much appreciated.

What I’m trying to achieve: I’m pulling an item image from the DB and displaying on top of a BG t-shirt image. The item images from the DB can have variety of width and height length(different ratio of width and height). I want the item picture to be always aligned to the top(top-align) and when the image has either longer width or longer height(like 16:9 or 9:16) I want the picture to shrink to the printable area. (The T-shirt BG image and the image have to be responsive to the window size as well.)

I want the item images to be like these.

My elements are setup in this way…
(a.) [Group: T-shirt / Align to parent (max-width: 900px, fit height to content: check)]
(b.) --[image: BG T-shirt / Align “center” (max-width: 100%, fixed aspect ratio: 4:3)]
(c.) --[Group: T-shirt / Align to parent / Align “center” (max-width: 27%, max-height: 50%)]
(d.) ----[image: item image / Align “*mid top” (run-mode rendering: Rescale)]

*I added (a~d) to make it easier to explain.

I tried many settings on the (d.) [image: item image] but no matter what I do I can’t still get it.

Here is the examples of the settings I’ve tried. *I also added (1~) to make it easier to explain.

(1), (d.) [image: item image / Align “center”(max-width: inf, max-height: 100%, fit height to content: check)]

4:3 item image

This is good

9:16 item image

But the 16:9 image gets zoomed and cut off the bottom…

(2), unchecking the [fit height to content] of (1),
(d.) [image: item image / Align “center”(max-width: inf, max-height: 100%, fit height to content: uncheck)]

4:3 item image

The image somehow aligned vertically in the middle, I want it to be top!

9:16 item image

This is what I want!

(3), setting the width and height of (2) to be both 100%,
(d.) [image: item image / Align “center”(max-width: 100%, max-height: 100%, fit height to content: uncheck)]

4:3 item image

The image is still vertically in the middle…

9:16 item image

Now the bottom of 9:16 image is zoomed and chopped off again…

Okay so, when I set max-height 100% bubble should not zoom and just rescale but it gets zoomed and cut off the bottom, why is bubble acting this way?

Or… If you have better idea to achieve this please let me know!

Sorry my mistake, I wrote
(d.) ----[image: item image / Align “center” (run-mode rendering: Rescale)]

but this should be Align “mid top” (I’ve already fixed it on the explanation)
(d.) ----[image: item image / Align “mid top” (run-mode rendering: Rescale)]

It could be done. Not very easily I suspect but off the top of my head I’d suspect you’d first need to know what is the aspect ratio of the image that is uploaded. If you are the only user uploading the images that is easy enough, but if users are uploading them, you’d need a way to find the aspect ratio. At that point you’d likely need a plugin or custom code to know the aspect ratio, as I do not believe Bubble can provide that data.

If you know the aspect ratio, then you’d have to dynamically change the image elements width and height, which can be done with some custom css or a plugin (quick search of forum will find a few threads on dynamic width/height custom css) or can check out this plugin I built (basically just has the custom css working properly)

You’d also want to have the image element inside of a container with layout settings so that it is always centered vertically and horizontally. Best bet would be to use align to parent container type.

1 Like