Fixed aspect ratio of images in CMS grid

Hi!

I’m just getting started with Webflow and I’m trying to do a CMS grid, displaying thumbnails, which, if you press each thumbnail, you will go to the respective project.

Every image have the aspect ratio of 1:1.4 but the problem is that the grid containers don’t “feel” this aspect ratio, so they don’t adjust themselves to the images, but acts independent of the images inside. This results in the images getting cropped, and when I adjust the browser window, the image containers keep cropping them in different ways.

How do I make the image containers “feel” the image, so to speak?

All the best,
Mateas


Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

The images are not 1:1, but if you want the presentation to be 1:1, you can assign a class to all of your image elements, and then adjust the Ratio and Fit settings to your liking;

1 Like

I actually had to remove this CMS altogether because I just discovered that the Basic Plan doesn’t allow for CMS. :frowning: This is going to be my own portfolio, and even though it would be nice to have CMS, I rather save in on some money. But I will definitely try this when I need to do a CMS grid for a client in the future! So a big thanks anyway!

The aspect ratio on all images is 1:1.4. What happens if I have a grid with totally random image ratios? Sometimes it can be quite nice to have a grid with images with different aspect ratios, and I would not like to have them change ratio then as well.

All the best
Mateas

You don’t need the CMS to build that layout- just would be way more convenient.
Otherwise, element are element, whether they have static content or are CMS-bound.

Depends on what you want to happen, but there are two basic approaches.

1 - make the images square and set object to “cover”. That will clip the edges but show you the image concept clearly. Then clicking on it shows the full image unclipped in a lightbox or whatever.

2 - use a layout that can handle non-uniform images, commonly referred to as a masonry layout.

1 Like

Thanks for the link! I might try this out even though I don’t have a project for it now, but just to understand. :blossom:

While I have your attention, would you mind looking at this question as well? :pray: