I’m seeking some help with this problem: How to always fit the image inside the screen?, to avoid scrolling, also avoid clipping the image.
In my attached example, when I’m in landscape mode, only the top part of the image is shown. Here I want to display the full image without being cut, or hide or scroll nothing.
Thanks for the tips.
Image when in portrait mode:
same image in landscape mode:
You can try to use contain style with your image inside a container; I hope that helps
PS. Resize Images Proportionally While Keeping The Aspect Ratio - PQINA
I tried that before but it doesn’t work. Not sure if it’s a bug or if I’m missing a step. Here’s my test:
Still, on Landscape mode it doesn’t seem to fit inside one screen height
I do play around with setting container width, height etc., but the image is CROPPED instead of resizing to fit the containers.
So basically there are too many potential combinations not sure which particular combination is correct.
What I want is to fit within 1 screen height (and width). Never flow out of the screen. Sounds easy but doesn’t work.
I think the contain attribute is correct; however you might want the wrapping container to expand its height up to the viewport height…that should do it…
Try A (advanced) size setting with width set to 100 per cent and height set to the viewport height from the system variables (use a formula to set the height);
I hope that helps
Hello Steven_Nguyen, Below is a video tutorial of me working on your problem, explaining why some solutions didn’t work and how to make it work. Hope this answers your question
(75) How to fit an image no matter its orientation - Appgyver QnSolutions - YouTube
