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?
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.