Question

我目前正在创建一个练习CSS的网站。我的要求似乎不太好。我一直在努力解决问题，但是我不断通过解决其他问题来制造新问题。这就是我要使它看起来像主要部分一样的方式：

______________________________________
|             |                      | 
|section with |                      |
|fixed size   |  responsive figure   |
|_____________|  (image + caption,   |
|             |  max height =        |
|section with |  combined hight of   |
|fixed size   |  sections)           |
|             |                      |
|_____________|______________________|

我需要使标题保持在图像的下方。图像必须保持其比例，并使用所有可用空间作为其宽度（固定在左右边缘）。调整大小时，我希望图形始终保持居中。

剩下的唯一不起作用的就是设置图像的最大高度。这是一件很简单的事情，但是以某种方式我无法使其正常工作。有趣的是，该零件在该过程中的某个时刻甚至还可以正常工作，但是在将图形的位置调整到中心之后就停止了工作。

这是我的代码：

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

（而且我正在使用Google Chrome浏览器）

Answer 1

在div元素中添加三个部分并根据需要固定其高度，然后在父div下的div中设置固定大小的部分，并将图像div也添加到父div下的div并定义样式响应式设计的百分比定义。

image for understanding

具有父级最大高度的自适应图像

1 个答案: