我目前正在创建一个网站来练习一些css。不过，我的要求似乎不太符合。我一整天都在努力解决它，但我不断地通过解决其他问题来制造新问题。这就是我试图让它看起来像主要部分内部的方式：
______________________________________
| | |
|section with | |
|fixed size | responsive figure |
|_____________| (image + caption, |
| | max height = |
|section with | combined hight of |
|fixed size | sections) |
| | |
|_____________|______________________|
我需要figcaption保持在图像下方。图像必须保持其比例，使用所有可用空间作为其宽度(粘贴到左边缘和右边缘(。调整大小时，我希望图形始终保持居中。
剩下的唯一不起作用的就是设置图像的最大高度。这是一件很简单的事情，但不知怎么的，我无法让它发挥作用。有趣的是，在这个过程中的某个时刻，这个部分甚至工作得很好，但在将人物的位置调整到中心后就停止了工作。
这是我的代码：
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Detailseite zu einem Raum</title>
<meta charset="utf-8">
<link rel="icon" href="Koala.jpg">
<style>
main {
display: grid;
grid-template-columns: auto 1fr;
margin-bottom: 2em;
}
#figdiv {
grid-area: 1/2/3/3;
display: flex;
align-items: center;
/* Bild mittig zwischen zwei Rows*/
max-height: 100%;
}
figure {
margin: 0;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<header><img id="logo" src="Koala.jpg" alt="Koala Logo" width="65" height="65">Detailseite zu einem Raum</header>
<nav>
<ul>
<li>
<a href="listeVerfuegbareRaeume.html">Verfügbare Räume</a>
</li>
<li>
<a href="detailseiteBuchung.html">Detailseite zur Buchung</a>
</li>
<li>
<a href="raumBuchen.html">Raumbuchung anlegen</a>
</li>
</ul>
</nav>
<main>
<section>
<h4>Informationen zum Raum</h4>
<div>
<!-- Ursprünglich: id="raumInfo" -->
<ul id="raumInfoListe">
<li>Nummer: A.E.01</li>
<li>Bezeichnung: Hörsaal</li>
<li>Gebäude: EF42</li>
<li>Kapazität: XY</li>
<li>Ausstattungsmerkmale:
<ul>
<li>1 Beamer</li>
<li>2 Whiteboards</li>
</ul>
</li>
</ul>
<!-- <figure> semantische Auszeichnung der Abbildung
<img src="Office.jpg" alt="Foto des Raumes">
<figcaption>Abbildung: Foto des Raumes</figcaption>
</figure> -->
</div>
</section>
<section id="tabellenContainer">
<h4>Tabelle der Buchungen zum Raum</h4>
<table id="tabelleRaumBuchungen">
<thead>
<tr>
<th>Datum</th>
<th>Zeitraum</th>
<th>Bezeichnung</th>
</tr>
</thead>
<tbody>
<tr>
<td>12.10.2018</td>
<td>12:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>13.10.2018</td>
<td>14:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>14.10.2018</td>
<td>15:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</section>
<div id="figdiv">
<figure>
<img src="Office.jpg" alt="Foto des Raumes">
<figcaption>Abbildung: Foto des Raumes</figcaption>
</figure>
</div>
</main>
<aside>
<label>Aktuelle Meldungen:</label>
<ul>
<li>11.10.2018, eine aktuelle Meldung</li>
<li>12.10.2018, noch eine aktuelle Meldung</li>
</ul>
</aside>
<footer>
<label>© Copyright 2018</label>
</footer>
</body>
</html>我在这里所做的可能会被简化，也可以随时让我知道：D
(我用的是谷歌浏览器btw(
在div元素中添加三个部分，并根据需要固定高度，然后在父div下的div中设置固定大小的部分，并将图像div也添加到父div下，并根据百分比定义样式定义以进行响应设计。
用于理解的图像