How to make popups follow the AR of the image inside?

Need help Responsiveness
1

I’ve been working on my app for 3 month in a row now, started from scratch and I am proudly was able to solve most problems I faced over the time, except one, and this is freaking me out by now.

The task is simple, yet I have found no solution for it yet. :face_with_raised_eyebrow:

I’d like to have a popup that’s not taller or wider than 80% of the vw or vh, that has a single image inside, and I want that popup to follow the AR (aspect ratio) of that image, without making it scroll or hang out of the popup.

Tried many css styles, but none of them worked for all aspect ratios so far.

I can easily do this inside a group (by toggling fit height/width to content), but can’t work out how the popup differs from them. Any suggestion is welcome and I promise I will test it!

Thanks in advance! :folded_hands:

2

Hi @peterfwriter,

I did something similar. This is my set up, hope it helps:

Popup container (reusable)

image
image935×393 12.7 KB

Instead of using an image, I used an HTML element:

image
image841×355 14.7 KB

Whenever I use the element:

image
image752×469 17.3 KB

1 Like
3

Hey man!

I really appreciate the contribution and sorry for not coming back to you earlier. This feature was out of my scope for a while because there are still bigger things to solve in the app right now.

But I definitely will come back to this, because the lack of this feature in my app is something that annoys me for a long time.

Cheers!