How can I accomplish full width page, 120px high NavBar, 3 Col Row, 40px high Footer, where an image in the central Col occupies 100% of remaining height between NavBar and Footer?
Or to put it another way 120px high div1, div2, 40px high div3 and make an image in div2 occupy 100% of remaining height between div1 and div3.
Thanks
Hi @timoto, thanks for the post. There is a few ways this can be done. One way is to give each of the divs a vertical height:
div1: 10vh (for the navbar)
div2: 85vh (for the image)
div3: 5vh (for the footer)
That will fill up exactly 100 vertical height on the page with the three divs.
What is really helpful is if you can share your site link, so we can see how you have the elements setup: Share a read-only link | Webflow University
Thanks for the support @cyberdave
Oh, I had assumed from the Webflow UI that %, px and Auto were the only options.
So vh has helped me to get my divs as required. NavBar 5vh, Heading 5vh, Main 86vh, Footer 4vh.
However now I’m wrangling with the image which is placed in a column.
I want the image to occupy as much of the column width as possible, retain aspect ratio, and limited to the 86vh.
I tried a variety of methods without success.
Your continued and excellent support much appreciated.
https://preview.webflow.com/preview/test-heights?preview=e18c2a5c9a1592107f363e2a26ba7623
Hi Timoto, From what it sounds like, you may be able to achieve this by setting the image to width: 100% and max-height: 86vh.
I’m not 100% certain tho without more info - can you please share some designs of screenshots explaining what you’re trying to achieve?
Thanks in advance! 
Hello @thewonglv
You can get to the site from the link above.
The vertical image here occupies 86vh as desired using 86vh height.
The horizontal image here occupies 86vh height and 100% width, but of course the aspect ratio is wrong:
The image below has 86vh removed and retains 100% width, and is seen with intended aspect ratio:
So how can I achieve 1 and 3, retaining aspect ratio, full height for vertical image and full width for horizontal image with one CSS class ?
Hi @timoto, can you please post a design of your intended result? I’m still a bit unsure of what your goal is with the design. Without a screenshot or design of your desired outcome, it’s difficult to find a solution. TIA!
Hello @thewonglv
Thank you for you continued support.
I’m really not sure how I can express this in simpler terms.
You see image 1 and 3 above ?
1 Is a vertical image and 3 is horizontal.
1, a vertical image, occupies 86vh with correct aspect ratio, Showing a circle, not an oval.
3, a horizontal image, occupies 100% width of the central column with correct aspect ratio. Showing a circle, not an oval.
However, I can only achieve that with 2 different classes. The class for 1 uses 86vh and the class for 3 uses 100% width.
I would like to achieve the same results with a single class, so that no matter whether the image is vertical or horizontal I will achieve results 1 or 3 respectively.
Can you think of a way that images, independent of vertical or horizontal aspect ratio can be displayed full height or width respectively in 1 class or other method of orientation relative code ?
The idea is to be able to display a slideshow of images in this way, displaying maximum height for vertical images and maximum width for horizontal images.
I hope that explanation helps a little more.
I’m trying to think of another way of putting it.
How about, how to make an image span 100% of it’s container’s width or height (which ever is the greater), without losing aspect ratio. Thus the image will resize when the browser resizes in height or width.
Hello @cyberdave , any thoughts on how to finish this off ? :
Make the image span either 100% of it’s container’s width or height vh (which ever is the greater of the image’s dimensions), without losing aspect ratio.
The intended behaviour being that image will resize when the browser resizes in height and/or width without losing aspect ratio.
Try using Width 100% for the image and keep the height blank or AUTO. This will keep the image in ratio.
Thanks @PixelGeek
width: 100% does not contain the image within the desired 86vh.
Adding max-height: 86vh squashes it:
Have you managed to achieve this yourself ?
Why not using a div that will be width and height 100% and just set a background for it? That would be the simpliest option I see here. Other than that you can’t resize in all directions an image and not expect it to stretch at some point. So a div that fits space entirely and background image with settings like cover, center would be sufficient.
his image has the white background, that’s the problem. It’s not a red circle png 
Most problem with pictures can be avoided when we have prepared our images right before uploading to webflow, right @bart?
Then div with background set to CONTAIN instead + white background.
Hello @Anna_Kelian
Yes, but with width: 100% and max-height: 86vh, when you resize the browser window the image loses it’s aspect ratio.
This image is simply an example, it could be any photo if you like. The objective is to have a CSS rule to resize the image based on viewport without losing aspect ratio.
I will try @bart s suggestion.
Thank you @bart
With columns set to 86vh, a div inside a column using height:100%; width: auto; background-image: Contain, I achieve the desired behaviour. http://test-heights.webflow.io/
Hi @timoto, I’m not 100% sure, but the image settings here may be helpful:
http://image-resize-test.webflow.io/
https://preview.webflow.com/preview/image-resize-test?preview=a04a6c7da5bc85a6f7ae10ae180d5456
If this satisfies the need, it may be a simpler solution. Hope this helps!
Hi @thewonglv, if you replace your 1:1 image with something portrait or landscape, then resize the browser viewport, I think you will find that the image does not retain it’s aspect ratio.
Indeed @timoto - oops!
