How to make grid content autofill to the aspect ratio set?

Question

I'm making a logo soup/quilt thinking of some solution to make it easy. So I make a 3x3 grid and add aspect-ratio: 2 / 1 to the grid elements. Now I want the imgs inside to expand so they either fit the max height or max width. Somehow the whole grid either expands past the scroll bar or the aspect ratio is set, but the images do not expand.

.grid-customers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 30px;
    place-items: center;
}

.customer {
    aspect-ratio: 2 / 1;
}

.customer a img {
    max-width: 100%;
    height: auto;
}

<div class="grid-customers">
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="media/logos/logo.png"/>
         </a>
     </div>
</div>

https://stackoverflow.com/questions/51577807/responsive-css-grid-with-persistent-aspect-ratio — Paulie_D, Jun 01 '22 at 16:01

Brett Donald · Answer 1 · 2022-06-02T03:50:30.717

If you want images to be scaled up, you'll need to set width, not max-width.

.customer a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Or you can use object-fit: contain; if you prefer.

.grid-customers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 30px;
    place-items: center;
}

.customer {
    aspect-ratio: 2 / 1;
}

.customer a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="grid-customers">
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
     <div class="customer customer-1">
         <a href="https://example.org/">
             <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg"/>
         </a>
     </div>
</div>

How to make grid content autofill to the aspect ratio set?

1 Answers1