Whole image visible within the viewport on all screens

jaos.pcl · 2020-08-06T16:54:27.508Z

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!

boston85719 · 2020-08-06T17:15:58.401Z

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

jaos.pcl · 2020-08-08T12:44:51.710Z

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.

boston85719 · 2020-08-08T14:33:45.186Z

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.

jaos.pcl · 2020-08-09T16:35:16.544Z

Thank you for your help! Got it to work!

nomorecode · 2020-08-09T17:16:19.170Z

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

nomorecode · 2020-08-09T17:18:21.715Z

Sorry forgot to add my canvas

Screenshot 2020-08-09 at 18.17.432551×1091 253 KB

nomorecode · 2020-08-09T17:24:15.489Z

and another using RG trickery to manipulate image BG’s

Screenshot 2020-08-09 at 18.23.212488×904 105 KB

boston85719 · 2020-08-09T19:14:09.760Z

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.

boston85719 · 2020-08-09T19:15:55.357Z

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?

nomorecode · 2020-08-09T19:18:03.608Z

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

nomorecode · 2020-08-09T19:18:54.394Z

This is a better screen @boston85719

Screenshot 2020-07-30 at 21.15.321438×953 283 KB

nomorecode · 2020-08-09T19:22:15.229Z

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

boston85719 · 2020-08-09T19:24:57.805Z

very nice. thanks for sharing

nomorecode · 2020-08-09T19:26:04.713Z

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