Crop Images in Flexbox Div Assembly that Keeps a Browser Height Ratio

Question

For the desktop landing page, I want this composition of images to maintain it's height in relation to the browser height (75vh), otherwise this landing collage will become too horizontal/skinny as someone shrinks the width of their browser.

As it changes proportion with the page getting wider or narrower, I want the images inside to be cropped, not stretched.

I figured out a way to crop them, but only if I set an actual px height to the images. I don't want that. I want the height to be in proportion to the browser height. If I make the divs they're in a ratio of the height of the browser, then the images just stretch inside to fit the div.

<div class="landing">
    <div class="landing-side"><img src="landing-1.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-2.jpg" alt=""></div>
    <div class="landing-center"><img src="landing-3.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-4.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-5.jpg" alt=""></div>
</div>


.landing {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    }
.landing img {
        width: 100%;
        height: auto;
        display: block;
        }    

.landing-center,
.landing-side {
        height: 75vh;
        display: flex;
        flex: 1 1 auto;
        overflow: hidden;
        justify-content: center;
        }

.landing-center {width: 40%;}
.landing-side {width: 15%;}

Here is how I did it before - at a certain browser width, the height would be fixed in px, then the side images would start getting cropped*. This is OK, but then I'd have to do make it hop to various specific image heights at different widths. Whereas I want the height of the whole larger container of images to change as the browser changes proportions.

    .landing {
    position: relative;
    width: 100%;
    display: flex;
    }
    .landing img {
            width: 100%;
            height: auto;
            display: block;
            }
    .landing-center,
    .landing-side  {
            display: flex;
            flex: 1 1 auto;
            overflow: hidden;
            justify-content: center;
            }

        @media screen and (max-width: 1536px) { 
            .landing-center {flex-shrink: 0;}
            .landing-center img,
            .landing-side img {
                width: auto;
                height: 400px;
            }
        }

*(Note: I'd prefer that only the side images get cropped in the first code example as well, but that may complicate things too much for this one question.)

Answer 1

To croping an image, you need to use overflow: hidden; just like:

 .croped-content { position: relative; width: 25vw; height: 70vw; border: 2px solid red; overflow: hidden; } .croped-content img { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="croped-content"> <img src="https://cdn.pixabay.com/photo/2017/10/06/07/29/guava-2822182_1280.png" alt="guava"> </div>

Answer 2

All I had to do is put the vh here, instead of the px. This works now. I got all mixed up trying too many ways to make this work that I missed the fact that I had put the height attribute to the container instead of the image.

.landing-center {flex-shrink: 0;}
            .landing-center img,
            .landing-side img {
                width: auto;
                **height: 75vh;**
            }