Preserving Image Aspect Ratio

I’m sorry if this has been covered elsewhere. If so just point me to it.

I want to reproduce a webpage I had designed in Freeway that has a 3 x 3 grid of images of DVDs and books that I am promoting. It also has a column on the right of that grid that contains links to essays elsewhere on the website and some general contact information. I have tried several approaches to duplicating this layout in Webflow including columns & div boxes. My problem is that the images get squeezed when the device is narrower. I don’t mind if the images get a bit smaller, but I want them to keep their original aspect ratio. (I’m not sure what the term is in Webflow lingo, but by aspect ratio I mean the proportion of width to height.) In one attempt I had images where one got skinny and the others kept their aspect ration and I couldn’t figure out why.

Here’s what I am trying to recreate in Webflow so that it can resize properly.

Layout

What layout are you using. Flex? inline? inline block?
Also it is customary to add link to working project.

Apparently I chose to use Inline Block in some places and have Block selected in others. Which should I use? (I obviously need to look at a tutorial explaining this.)

If you want to look at my project its at : Design Responsive Websites - Webflow

There are a host of other issues aside from the one I described. I have only just started trying to use Webflow (because Muse is being discontinued). I designed a fairly complicated site in Muse, but what I need to do now is go back to this old website I designed in Freeway and turn it into a responsive one.

It appears I do not have permission to access your site. you have to to permission on and off when sharing link. / There is a short explanation on sharing links. How to Enable a Webflow Share Link

@RichardP Block or inline block depend on how you wish element to display and you can change from desktop to … other… inline block for desktop and block for tablet and phone for example.
Try my example and see if it works for your project.

https://preview.webflow.com/preview/rgpwebsite?preview=ee192f23798447a9e552ab6de65746d1

I think you should be able to look at this.

I would make them all inline block in desktop, all block in tablet which should make all blck in both phone displays. Then on phone landscape I would center each photo .
To center there are 3 dots in layout under margin / padding recangles (lower right)
Another option switch to flex layout in tablet. That should also work. maybe better???

If none of that helps see the answer in this post. We found an image bug

I appreciate your taking the time to help. I’ll try all your suggestions and keep playing with my layout.

Hi, I ran across the same problem - Images in grid getting squished out of proportion in mobile views - and found a simple answer.
If I click on the width and height dropdowns and re-select Auto and Auto, then the images resize to scale proportionally. Even before selecting Auto, the menu appears to be set to Auto, but manually re-selecting, for some unexplained reason, fixes the issue for me.

image