How to place images of different extensions in blocks without compression. HTML + CSS example

<section class="cards">
    <h2 class="cards__title title">3 col</h2>
    <div class="cards__row">
        <div class="cards__column">
            <div class="cards__item">
                <div class="cards__image">
                    <img src="img/800x400.jpg" alt="">
                </div>
                <div class="cards__body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti a voluptatibus autem eaque aut nisi quis ex sequi! Ducimus necessitatibus deleniti mollitia ex dignissimos odio obcaecati totam est nesciunt?
                </div>
            </div>
        </div>
        <div class="cards__column">
            <div class="cards__item">
                <div class="cards__image">
                    <img src="img/400x600.jpg" alt="">
                </div>
                <div class="cards__body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti a voluptatibus autem eaque aut nisi quis ex sequi! Ducimus necessitatibus deleniti mollitia ex dignissimos odio obcaecati totam est nesciunt?
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti a voluptatibus autem eaque aut nisi quis ex sequi! Ducimus necessitatibus deleniti mollitia ex dignissimos odio obcaecati totam est nesciunt?
                </div>
            </div>
        </div>
        <div class="cards__column">
            <div class="cards__item">
                <div class="cards__image">
                    <img src="img/1300x200.jpg" alt="">
                </div>
                <div class="cards__body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti a voluptatibus autem eaque aut nisi quis ex sequi! Ducimus necessitatibus deleniti mollitia ex dignissimos odio obcaecati totam est nesciunt?
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.cards__row {
    margin: 0px -15px 70px -15px;
    display: flex;
}

.cards__column {
    flex: 0 1 33.333%;
    padding: 0px 15px;
}

.cards__image {
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 58% 0px;
    overflow: hidden;
    position: relative;
}

.cards__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}