具有父级最大高度的响应式图像
Posted
技术标签:
【中文标题】具有父级最大高度的响应式图像【英文标题】：responsive image with max height of parent 【发布时间】：2019-05-04 04:12:04 【问题描述】：我目前正在创建一个网站来练习一些 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" >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" >
<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" >
<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
（顺便说一句，我正在使用谷歌浏览器）
【问题讨论】：
【参考方案1】：将三个部分添加到 div 元素并根据需要固定高度，然后在父 div 下的 div 中设置固定大小的部分，并将图像 div 也添加到父 div 下的 div 并定义样式响应式设计的百分比定义。
image for understanding
【讨论】：
是否也可以不为部分设置特定大小？目前，部分的高度是自动设置的，并且非常完美，但是当我将窗口扩展到图像高度高于固定部分的高度时，它会被拉伸。 您必须以百分比设置图像的高度，它会根据保存该图像的 div 来调整图像的大小 是的，我同意。但我不想硬编码 div 的大小。 div 应该尽可能小以使部分的内容适合。因此，高度可能会有所不同，具体取决于您使用的浏览器/设备。 在样式表中使用 maxwidth 函数，您可以控制不同布局的高度，在大多数网站中，高度始终是硬编码的，宽度是从屏幕捕获的，因为可以巨大的页面意味着网站的高度可能很长，如果没有给出图像将使用其默认高度，这可能会破坏从不同设备查看时的外观。这个网站可能会帮助你：websitedimensions.com以上是关于具有父级最大高度的响应式图像的主要内容，如果未能解决你的问题，请参考以下文章