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

Question

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

我在这里制作了电子笔：https://codepen.io/mavromatika/pen/zYvGrZo

这是我的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标签内：）>

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

我做了一个简单的网格布局，只有一列和三行。第一个和最后一个分别充当页眉和页脚，而主要内容应放在第二个单元格中。如果页脚单元格为空，...

Answer 1

您只需将其作为这样的图像容器的背景图像放置：