Streaming live at 10am (PST)

Preserving Image Aspect Ratio


#1

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


#2

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


#3

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 : https://webflow.com/design/rgpwebsite

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.


#4

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


#5

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


#6

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

I think you should be able to look at this.


#7

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


#8

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


#9

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