Force aspect ratio of grid images

[Raymie (Raymie Humbert)]

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

[Stan (justAnotherDeveloper)]

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

.collection-item{
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.
m2c

[Raymie (Raymie Humbert)]

@Stan

aspect-ratio: 4/3;

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

[Stan (justAnotherDeveloper)]

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.

[Raymie (Raymie Humbert)]

Thanks, that explains quite a bit.

[Stan (justAnotherDeveloper)]

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