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)]