In Grid layout, make image fit the height of its containing cell

Question

I made a simple grid layout with a single column and 3 rows. The first and last act as header and footer respectively, while the main content should go in the second cell. If the footer cell is empty, its height is the same as the header's, that is, the height calculated by the grid layout (which is what I want to keep). When I add an image inside the footer cell, the cell grows to the image's height. I don't know what CSS to use to keep the footer's initial height, and adapt the image's height to fit in.

I made a code pen here : https://codepen.io/mavromatika/pen/zYvGrZo

Here's my CSS :

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .contenant-presentation {
            height: 100%;
            display: grid;
            grid-template-rows: 1fr 10fr 1fr;

        }
        .header {
            grid-column: 1 / 4;
            background-color: orange;
        }
        .main-content {
            grid-column: 1 / 4;
            background-color: darkturquoise;
        }
        .footer {
            background-color: #ebebeb;
            grid-column: 1 / 4;
        }
        .img-container {
            height: 100%;
        }
        .img-container img {
            height: 100%;
            width: auto;
        }

And my HTML (inside the body tag):

<div class="contenant-presentation">
        <div class="header">Les loups</div>

        <div class="main-content"></div>

        <div class="footer">
            <div class="img-container">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FupL-45sHwko%2Fhqdefault.jpg&f=1&nofb=1">
            </div>
        </div>
    </div>