Streaming live at 10am (PST)

Image to occupy 100% remaining viewport height or 100% column width depending on portrait or landscape orientation respectively in a single class


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 ?


@timoto is this what you want to achieve?

width 100%
max height 86vh
(using the landscape image)


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 :confused:

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.


Hi @timoto, I'm not 100% sure, but the image settings here may be helpful:

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!


Hey I just wanted to follow up on this. I'm struggling with the exact same problem. Was wondering if changing the div background image did the trick for you after all. I was also curious about your photo export dimensions prior to uploading.

My issue is I'm trying to make a grid of images (3 columns) for my jewelry website but I need to adjust sizing so that the image of each piece of jewelry has accurate sizing in relationship to the other pieces. Things were getting all messed up with the aspect ratio. Looks like you may have stumbled upon a solution?


Hello @Daniel_Schulman

Yes, for my case scenario using a background image meant that I could scale the image and retain it's aspect ratio, be it a horizontal or vertical image. Using a combination of vh and % the image occupies as much height or width as possible respectively.

I later decided not to use this method because it was more fluid than I wanted for the rest of the page.

I found that using display: table and it's various options may be more useful to me, but it means that you have to do more code in the custom code page.


To maintain 1:1 aspect ratio for an image I usually set it as a background of a div, then give that div a bottom padding of 25% - 50% (depends on the size of the image) and set the background image to cover. :smile:


Hi @Waldo

My need was to occupy the max height/width remaining in an element whilst retaining aspect ratio which was answered by @bart and my reply to his post.


Ahhh yes, gotcha @timoto :smile:

closed #26

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