Constrain height adjust width

2025-12-25 22:47 UTC gpt-5-2 Open in ChatGPT ↗

keep the height of the images constrained (as it is now) but let the width vary, depending on each image’s ratio:

{% for c in collaborators %}

<div class="col-xl-1 col-lg-2 col-md-2 col-sm-2 col-3 d-flex justify-content-center">
    <a class="client-logo">
        <img src="{{ localpath }}/content{{ c.logo }}" alt="" class="img-fluid">
    </a>
</div>

{% endfor %}

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

✅ Recommended solution

HTML (simplify the columns)

<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">
            <a class="client-logo">
                <img src="{{ localpath }}/content{{ c.logo }}" alt="">
            </a>
        </div>
    {% endfor %}
</div>

CSS

.client-logo img {
    max-height: 60px;   /* adjust as needed */
    width: auto;
    max-width: none;    /* important: overrides Bootstrap img-fluid */
    display: block;
}

🔍 Why this works

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

Optional: keep responsive wrapping

If you want clean wrapping behavior on small screens, you can add:

.client-logo {
    white-space: nowrap;
}

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.

Yep — by removing the col-* divs, your .row no longer has the Bootstrap “columns” behavior you were relying on, so items can end up acting like full-width blocks and stack.

Make the container a wrapping flex row and make each logo wrapper shrink-to-fit:

✅ Fix (auto-wrapping row + fixed height, variable width)

<div class="d-flex flex-wrap align-items-center justify-content-center" style="gap:64px">
  {% for c in collaborators %}
    <a class="client-logo d-inline-flex align-items-center justify-content-center">
      <img src="{{ localpath }}/content{{ c.logo }}" alt="">
    </a>
  {% endfor %}
</div>

.client-logo img{
  height: 60px;        /* keep height constrained */
  width: auto;         /* let width vary by ratio */
  max-width: none;     /* don't let Bootstrap clamp width */
  display: block;
}

Notes

flex-wrap + gap:64px gives you a neat wrapping “row of logos” layout.
Using a.client-logo as the item removes extra nested divs and keeps each item only as wide as its image.

If you want different spacing on mobile (64px can be huge), you can swap gap:64px for Bootstrap gap utilities like gap-4 gap-md-5 etc.