Force aspect ratio of grid images

I have a grid with CMS collection list images. Unfortunately, the aspect ratios of the grid boxes are widely varying at different sizes from square to long and thin horizontal. As a graphic designer, this isn’t very optimal. Is there a way to cap the aspect ratio of the pages so I can be reasonably sure that the images will appear in boxes that are square or 4:3 or whatever ratio I desire?

Read-only site link: LINK

hi @Raymie the easies way is to use CSS property custom-ratio

aspect-ratio: 4/3;

result 4/3

BTW: you should avoid using vh as it will cause issues. You should use padding and margin instead.

Thanks, except now at smaller breakpoints the grid far overflows into the other sections. How do I avoid that?

hi @Raymie I have mentioned in my first comment to pay attention to vh when you look into your code collection list have fixed height 40vh and images grid is bigger than that. Just remove this fixed height and you should be fine.

Thanks, that explains quite a bit.

1 Like

if you do not have further questions related to your request and issue doesn’t persist feel free to close your request as solved. :wink:

1 Like

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