How do I load a cropped image and make it object fit contain?

[twan-2022]

I have the following code:

@foreach($logos->imageObjects('image', 'default') as $logo)
    <div class="swiper-slide d-flex">
        <a href="{{ $logos->image('image', 'default', ['h' => 300, 'object-fit' => 'contain'], false, false, $logo) }}" class="card-img d-flex align-items-center p-3" data-gtf-mfp="true"
           data-gallery-id="03">
            <img src="{{ $logos->image('image', 'default', ['h' => 300, 'object-fit' => 'contain'], false, false, $logo) }}" loading="lazy" alt="product gallery" class="w-100 h-auto">
        </a>
    </div>
@endforeach

This makes sure all images have a height of 300, but this means some are cut off. I want all images to have a max height of 300 and the width be variable. In other words all images should remain their aspect ratio, not be cut off and have a max height of 300. How can I do that and is that possible with the twill media model?

[YahyaS3d]

@foreach($logos->imageObjects('image', 'default') as $logo)
    <div class="swiper-slide d-flex">
        <a href="{{ $logos->image('image', 'default', ['h' => 300, 'object-fit' => 'contain'], false, false, $logo) }}" class="card-img d-flex align-items-center p-3" data-gtf-mfp="true"
           data-gallery-id="03">
            <img src="{{ $logos->image('image', 'default', ['max-h' => 300], false, false, $logo) }}" loading="lazy" alt="product gallery" class="w-auto max-h-300">
        </a>
    </div>
@endforeach

update css:

.max-h-300 {
    max-height: 300px;
    width: auto; /* Allows the width to scale based on the aspect ratio */
}

[ifox]

Hi @twan-2022 sorry for the delay in responding here.

Are you using Glide to render images? object-fit is not a valid parameter if so. See the documentation about the fit parameter here, which is what you are looking for: https://github.com/thephpleague/glide/blob/master/docs/2.0/api/size.md#fit-fit