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

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

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