Page 1 of 1

Make Image full height of screen

Posted: Mon Oct 21, 2019 9:44 pm
by atb
Hello,
I just can't work this out and I'm sure there's a simple answer!.....

I have a very wide image that I would like to be responsive to fit full height of the screen and then keeping the aspect ratio be able to scroll horizontally.
Hope that makes sense!

Thanks
ATB

Re: Make Image full height of screen

Posted: Mon Oct 21, 2019 10:50 pm
by crispy68
If the image is set as a background of layer, set it to 'cover'. This will make sure it fits the entire layer horizontally and keep the aspect ratio. It's the same for the page background in the page properties.

Re: Make Image full height of screen

Posted: Tue Oct 22, 2019 8:41 am
by atb
Thanks for your reply crispy,
What I want is to have the image fill the screen vertically and then the user be able to scroll left and right to view the rest of the image.

Specifically, I'm trying to get it to work on a phone using a 320px breakpoint so the image fits the full height of the page and then can be 'swiped' left and right to see the rest of the image.

Re: Make Image full height of screen

Posted: Wed Oct 23, 2019 3:54 pm
by atb
Still can't get this to work...

I can get the image to fill the screen vertically, but can't scroll left-right or I can get it to scroll left-right but not fill the screen.

Does anyone have any suggestions?

Thanks in advance

Re: Make Image full height of screen

Posted: Wed Oct 23, 2019 4:49 pm
by Pablo
Do you have an example of what you are trying to do?

Re: Make Image full height of screen

Posted: Wed Oct 23, 2019 8:43 pm
by atb
hello Pablo
This here has a layer with the background set with the image.
the layer mode is Floating Layer
Floating mode is Default
I have the background image size set to Cover
the page properties - page alignment I have set page width and height to 100%

I can either get it to show the full image by scrolling left-right but not fit the full hight of the screen vertically.
OR
Fit the full screen height vertically but can't scroll left-right.

I cant get it to do both.

On a desktop type monitor its not too bad but on a mobile phone screen the image is reduced in size considerably.

is it possible?

Re: Make Image full height of screen

Posted: Thu Oct 24, 2019 5:49 am
by Pablo
There is no way to add a vertical scrollbar to the image only.
But you can try to put it inside an inline frame.
The inline frame should be inside a layout grid to make it flexible.

Re: Make Image full height of screen

Posted: Thu Oct 24, 2019 7:32 am
by atb
Thanks Pablo
I think thats got it :)