Html 在网格布局中，使图像适合其包含单元格的高度

我做了一个简单的网格布局，只有一列和三行。第一个和最后一个分别用作页眉和页脚，而主要内容应放在第二个单元格中。 如果页脚单元格为空，则其高度与页眉的高度相同，即网格布局计算的高度（这是我想要保留的）。当我在页脚单元格中添加图像时，该单元格将增长到图像的高度。我不知道使用什么CSS来保持页脚的初始高度，并调整图像的高度以适应

我在这里做了一支密码笔：

以下是我的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;
        }

和我的HTML（在body标记内）：

卢普斯酒店

对于第三行，使用

minmax（0，1fr）

代替

1fr

。对于第三行，使用

minmax（0，1fr）

代替

1fr

。

<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>