Höhenangaben - werde ich das jemals verstehen?

[Rolf B]

Hallo Henry,

indem du die Höhe des <li> begrenzt

tu ich doch. Ein outline zeigt mir, dass die Begrenzung des li und des figure Elements funktioniert.

Aber das img pfeift drauf. Ich habe das Fiddle nochmal aktualisiert; die figure ist jetzt ein Grid. Höhe der figcaption: auto. Höhe des Bildes: 1fr.

Höhe ul: 570px Höhe li: 570px Höhe figure: 570px Höhe figcaption: 18px Höhe img - man sollte 552px erwarten. Real: 599px (beim Kölsch)

Aber ich hab jetzt ein Workaround gefunden, scheint mir.

<figure>
  <figcaption>...</figcaption>
  <div>
    <img src="..." alt="..."
  </div>
</figure>

figure {
  margin: 0; padding: 0;
  height: 100%;
  display: grid;
  grid-template: "caption" auto "bild" 1fr / 1fr;
  justify-items: center;
}
figure div {
  grid-area: bild;
  height: 100%;
  overflow:hidden;
}
figure img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

Ohne das div geht's nicht. Ohne overflow:hidden auch nicht. Offenbar braucht es den block formatting context, den overflow:hidden erzeugt, um die Höhe des div "definite" zu machen. Und nur eine "definite height" sorgt dafür, dass die Höhe eines Kindelements in % akzeptiert wird.

Und jetzt wollte ich noch erreichen, dass ein breites Bild vertikal zentriert wird. Align-irgendwas? Justify-irgendwas? Von wegen. Das div ums img hat ja eine Höhe von 100%, d.h. das kann ich vertikal zentrieren wie ich will, das füllt die Grid-Zelle immer voll aus. Und max-height:100% nimmt mir wieder die definite height weg, die das img für seine Höhe braucht.

Also muss das div jetzt auch noch eine flexbox werden, damit ich da align-items:center reinschreiben kann.

Irgendwie ist das alles noch nicht der Weisheit letzter Schuss.

Rolf