Can I have a page scale verticall so it always fits the browser(no scrolling)

Hi there!
http://schwim.net/after5/

I have a page consisting of images that is already pretty nifty in the fact that it squishes horizontally to fit any width browser. I would like to know, however if I could also do this vertically, while scaling the width to remain the proper ratio. for instance, if the browser height is big enough, it will allow the page to be the full width, but if they can only fit half the height, it would shrink it to fit and also scale the width to be 50%, keeping the images in correct shape.

There will be some social buttons below the images and I would like the logo to scale in proportion, even though it wouldn’t be too wide, so it doesn’t look too large in relation to everything else, so I’m thinking maybe everything in the large master container would scale based on the height of master.

Is this something that would be possible?

Thanks for your time!

Yes I think it’s possible, utilising the vmin unit, but I’m not sure it’s a good idea, though I could be misunderstanding your intention.
You want the page to be a fixed aspect ratio, and always shrink to fit entirely within the screen space, is that correct?

That wouldn’t really work because if you based the image on height then the width would need to be auto and then on narrow screens that are tall the images would overlap or cause a larger scrollbar and on wide screens with small heights the images would have great big gaps between them.

The only way you could do it would be to divide the screen/layout into sized percentage sections as you require and then place the images as background images (or use object-fit for real images) and then use background-size:cover to ensure the image fills each area.

Of course this means that some images may not be displaying all the detail as they will be zoomed or shrunk to fill the area they reside in.

I think it can be done within a limited degree, but is that what you really want? It is not an effective use of viewport space. Plus changing things like the menu and preserving the aspect ratio of the rest of the page would become awkward, to say the least.

Just for fun, going with your description, I created a screen shot of your page and put it in a frame that keeps it within the screen. I could have used {background-size:contain;} but that would have avoided the requirement that quite a few calculations would be needed to keep the content within the page. This uses vh to set the width of the one image. Imagine if you had more.

The file is large because of the screenshot in .png format. .jpg would have been smarter and smaller. Download, unzip and doubleclick. Resize browser window strangely (landscape and portrait).

FullyResizingPage.zip (1.5 MB)

There was a similar request a few days ago (with working page):

Divs moving downward when I resize the browser - #37 by ronpat

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.