Right now the Bootstrap column widths (e.g. col-xl-1, col-lg-2, etc.) are what’s forcing the logos to have similar widths. The images themselves already preserve aspect ratio (img-fluid = max-width: 100%; height: auto).
To lock the height but let width vary per logo, you should:
- Constrain the image height explicitly
- Let the width be
auto
- Avoid fixed-width grid columns for the logo itself
<div class="row align-items-center justify-content-center" style="column-gap:64px">
{% for c in collaborators %}
<div class="d-flex align-items-center justify-content-center">
<img src="{{ localpath }}/content{{ c.logo }}" alt="">
max-height: 60px; /* adjust as needed */
max-width: none; /* important: overrides Bootstrap img-fluid */
max-height keeps all logos visually consistent
width: auto preserves each image’s natural aspect ratio
- Removing
col-* classes allows the width to grow/shrink naturally
max-width: none prevents Bootstrap from forcing width limits
If you want clean wrapping behavior on small screens, you can add:
If you want the logos vertically centered and perfectly aligned across rows, tell me your desired height and breakpoints and I’ll tune it precisely.