отзывчивое изображение с максимальной высотой родителя - PullRequest
Новая
       15

отзывчивое изображение с максимальной высотой родителя

0 голосов
/ 02 декабря 2018

В настоящее время я создаю веб-сайт для практики некоторых 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

(И я использую Google Chromeкстати)

1 Ответ

0 голосов
/ 02 декабря 2018

Добавьте три раздела к элементу div и установите нужную высоту, затем установите разделы фиксированного размера в div под родительским div и добавьте изображение div в div под родительским div и определите стильопределения в процентах для адаптивного дизайна.

изображение для понимания

...