Whole image visible within the viewport on all screens

I’m trying to have an image visible within the viewport on all screens. I know very little code but this is what I started with:

<style>
#img1{
    width: 86vh !important;
    height: 78vh !important;
}
</style>

But with this code, the image expands outside the screen.

ezgif.com-video-to-gif

I tried to add the following code:

   {... position: absolute !important;
    right: 0px !important;
    bottom: 0px !important;
}

It didn’t help. Has someone else encountered the same problem? Any help appreciated!

The image element has a checkbox to keep image proportions…that might help you as the image will keep proportions and become smaller both width and height as the page width decreases or increases

1 Like

Yes, thank you. But due to different screen ratios, the whole image wont always be visible. And at the same time, I want to maximize both the width and height.

I think your issue is not about the size of the image element itself, but rather the entire page responsiveness settings.

Using the keep image proportions will change the size of the image and keep the entire image visible, although at a smaller scale.

Having different screen rations, such as the difference between an iPhone in horizontal or vertical position comes to a page responsiveness settings. You can put an image element into a group element to get more control over the image and its position and visibility for page responsiveness.

Sometimes you might put that image on the right side of the page, but because of page width you might need to put the image under the text currently on the left side of your page. This will require you to use page responsiveness settings.

Something like this.

page responsivenss

I have a group on the left and a group on the right. The group on the right has a copy of it underneath the group on the left. I use responsive editor to set ‘hiding rules’ for the right side group for responsive behavior I want to acheive.

Page responsiveness is tricky and takes time to master, if anybody could really master it.

2 Likes

Thank you for your help! Got it to work!

As a side note, both groups and/or shapes can have BG set to image with some good repo results. Just some food for thought :ok_hand::ok_hand::ok_hand:

1 Like

Sorry forgot to add my canvas

and another using RG trickery to manipulate image BG’s

How do you set up your groups so image proportions stay the same? For example if you limit a user to upload an image with a 16:9 ratio, can you use the group background image settings to maintain that ratio as the group width is resized?

I have a really difficult time getting elements below my images set to keep element proportions to move up as the image element height is reduced in proportion to the reduction in image element width.

What is going on here? I want to pick up some new tricks, but can’t figure what it is. Do you have an RG with a group inside a cell with the group background set to image?

Not really or should I say, not without code. It’s a Bubble limitation.

This is a better screen @boston85719

RG has a data field img which is set as child group 1 bg > I then mask group 2 over top of group with with opacity set to 0 > then on hover set group 2 bg img as gradient. I also add some other juicy bits > expand, like, profile etc etc

1 Like

very nice. thanks for sharing

1 Like

You’re welcome mate, it’s coming to the template marketplace very soon :muscle::muscle::muscle:

1 Like