Breite der figcaption bei responsiven Bildern

[ph!L]

Hallo zusammen,

ich stehe gerade vor der Problematik, bei responsiven Bildern die Bildunterschrift zu stylen.
Das Hauptproblem dabei (und das war es auch schon früher bei nicht-responsiven Bildern) ist, dass die figcaption standardmäßig die volle Breite des Umgebenden Containers nutzt.
Früher hatte ich daher im Template die Breite des Bildes ausgelesen und der Bildunterschrift als Inline-Stylesheet vergeben. Bei responsiven Bildern ist das aber nicht so einfach möglich, da es ja nicht "die eine" Breite gibt.

Wie habt Ihr das so gelöst?

Viele Grüße,

Philipp

[Spooky]

Ich löse das mittlerweile per JavaScript, da pure CSS Lösungen oft unzureichend sind, je nach dem was man braucht. zB:

// fix figcaption width
$('figure').each( function()
{
    var $figure = $(this);
    var $caption = $figure.find('figcaption');
    var $img = $figure.find('img');
    $caption.css('max-width',$img.width());
}); 

Pure CSS Lösungen findest du auch hier im Forum.

[ph!L]

Ich bin eigentlich kein Fan von JS-only Lösungen, aber in diesem Fall scheint das wirklich das beste zu sein.

Besten Dank, funktioniert 1A.

[Andreas]

/* CSS */
figure {
  width: min-content;
} 

https://caniuse.com/mdn-css_properti...th_min-content

[Bennie]

Gibt es dazu neuere Ansätze als die bisherigen, evtl mit css grid ?

@Andreas
Deine Lösung funktioniert wie genau? Dem figure width: min-content;zu geben alleine reicht nicht und ich hab irgendwie keinen Weg gefunden das sinnvoll einzusetzen ohne dass das Bild auf ein Minimum schrumpft

[dazzle89]

Falls ich das Problem richtig verstehe:

figure {
   display: table;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
}

[Spooky]

Ich würde da eher mit flex oder grid arbeiten.

[Bennie]

@dazzle89
ja diese "alte" Lösung kenne ich, aber soweit ich mich erinnere hatte das auch irgendwelche Nebeneffekte, oder?
Eine Lösung mit flex oder grid hab ich bisher nicht gefunden (außer mit festen Breitenangaben)

[Andreas]

@Andreas
Deine Lösung funktioniert wie genau? Dem figure width: min-content;zu geben alleine reicht nicht und ich hab irgendwie keinen Weg gefunden das sinnvoll einzusetzen ohne dass das Bild auf ein Minimum schrumpft

Ja, ich renne da auch immer wieder in Probleme. Bei mir hatte es damals mit min-content funktioniert, dann muss aber auch das andere CSS entsprechend sein, weiß jetzt auch nicht mehr, warum das funktioniert hatte.

Grad gestern hatte ich es auch mit Grid gelöst, war in ner Galerie. In ner Galerie ist es einfach, da man eine Galerie sowieso am besten mit Grid aufbaut.

Bei Inhaltselementen habe ich gerade die Möglichkeit geschaffen zwischen 4 Bildbreiten auswählen zu können. 1/1, 1/2, 1/3 und 1/4. Bildgröße wird über das Select ausgewählt. Den Bildgrößen habe ich auch eine Klasse gegeben - img_1_2, img_1_3 ....

Leider wird der :has() Selektor noch nicht voll unterstützt, sonst könnte jetzt ich sagen.

figure:has(.img_1_2) {
  max-width: 50%;
}

figure:has(.img_1_3) {
  max-width: 33.3333%;
} 

Also entweder mit JS die Klasse beim Bild entnehmen und auf das Elternteil legen. Oder so wie ich es gerade gemacht habe (weiß nicht ob das so bleibt) mit der Erweiterung Komponenten StyleManager Klassen anlegen, die der Kunde dann zuschalten muss - "Bildbreite auf 1/3 beschränken".

Kommt auch drauf an, ob der Kunde den Text um das Bild herum fließen lassen möchte, was ich persönlich nicht so schön finde, oder ob er klar definierte Spalten haben möchte für Text und Bild. Ist alles umsetzbar mit block, float, flex oder grid. Der Knackpunkt ist wohl, dass man sich für bestimmte Breiten entscheiden muss (nicht Pixelwerte, sondern prozentuale Breiten), was man ja aber auch macht, wenn man ein Design erstellt.

Hier für Grid die beste Lösung für z.B. Galerien, wenn man den Bildern bestimmte Mindest- und Maxbreiten zuordnen möchte.
https://www.youtube.com/watch?v=qjJR3qYCd54

[Andreas]

Ich habe jetzt eine Lösung.

Zuerst werden Bildgrößen angelegt

Image 1/1 904x (100%) - CSS-Klasse img_1_1
Image 1/2 452x (100%) - CSS-Klasse img_1_2
Image 1/3 302x (100%) - CSS-Klasse img_1_3
Image 1/4 226x (100%) - CSS-Klasse img_1_4

Dann erstellt man ein paar Variablen

:root {
  --main-padding-x: 3rem;
  --main-padding-y: 3rem;
  --max-width     : 1000px;
  --inner-width   : calc( var(--max-width) - 2 * var(--main-padding-x) );
} 

Dann das CSS für Textelemente mit Bild

.ce_text figure {
  width: min-content;
}
img[class^=img_1_] {
  --dividend: 1;
  min-width: min( calc( var(--inner-width) / var(--dividend) ), calc( (100vw - 2 * var(--main-padding-x)) / var(--dividend) ) );
}
img.img_1_2 {
  --dividend: 2;
}
img.img_1_3 {
  --dividend: 3;
}
img.img_1_4 {
  --dividend: 4;
} 

Der Knackpunkt war width: min-content; für figure und min-width: [ein Pixelwert]; für das img.

Das Elternelement brauch dabei keine extra Klasse mehr.

Das min(...) wird benötigt, damit bei großer Viewportbreite die Breite aus der im .inside zur Verfügung stehenden Breite errechnet wird. Wird der Viewport dann kleiner als die max-width, wird die Breite aus dem Viewport errechnet. Prozentuale Werte haben dabei nicht funktioniert, es mussten entweder Pixelwerte oder Viewportbreite vw benutzt werden.

Ein 1/3 Image behält also beim Zusammenschieben des Viewports die Breite eines Drittels.

Mit Media-Queries kann man die Breite dann anpassen, wenn der Viewport kleiner wird.

/* ... less than 485px ...
-----------------------------------------------*/
@media (max-width: 484px) {
  main .inside { /* optional */
    --main-padding-x: 1.5rem;
    --main-padding-y: 1.5rem;
  }
  img.img_1_2 {
    --dividend: 1;
  }
  img.img_1_3,
  img.img_1_4 {
    --dividend: 2;
  }
}
/* ... less than 485px ... END
-----------------------------------------------*/ 

Die Umsetzung war mit Floats. Ich werde auch nochmal mit Flex und Grid testen.

Weiteres CSS, was dort noch im Einsatz ist und eventuell eine Rolle spielen könnte

#wrapper {
  margin-inline: auto;
  width: var(--max-width);
  max-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, container, footer */
}
main .inside {
  padding: var(--main-padding-y) var(--main-padding-x);
}
figure {
  margin: 0;
}
.image_container a,
.image_container img {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
}
.float_left {
  float: left;
  margin-right: 1em;
  margin-bottom: .5em;
}
.float_right {
  float: right;
  margin-left: 1em;
  margin-bottom: .5em;
}
.float_above {
  margin-bottom: 1em;
}
.float_below {
  margin-top: 1em;
} 

Die Floats werden dann irgendwann aufgehoben

/* ... less than 485px ...
-----------------------------------------------*/
@media (max-width: 484px) {
  .float_left,
  .float_right,
  .float_above,
  .float_below {
    float: none;
    margin: 1em 0;
  }
}
/* ... less than 485px ... END
-----------------------------------------------*/ 

[Bennie]

@Andreas
Danke für deine Lösung

Wobei ich mich frage ob das für ein anscheinend "kleines" Problem nicht etwas über's Ziel ist - nicht falsch verstehen, aber das Ganze nur um eine Bildunterschrift nicht breiter als das Bild werden zu lassen?

[dazzle89]

Ich wüsste jetzt nicht, was gegen die Lösung mit display: inline-table spricht, sofern man den IE 6 und 7 nicht unbedingt unterstützen will lasse mich aber gerne korrigieren

[Andreas]

@Andreas
Danke für deine Lösung

Wobei ich mich frage ob das für ein anscheinend "kleines" Problem nicht etwas über's Ziel ist - nicht falsch verstehen, aber das Ganze nur um eine Bildunterschrift nicht breiter als das Bild werden zu lassen?

Nun ja, mein Post ist ziemlich lang, aber eigentlich ist es nicht viel CSS. Das meiste davon hat man ja sowieso in seinem CSS. Und man sollte dem Kunden sowieso auch nur fertige Bildgrößen anbieten. Kommt auch darauf an, was der Kunde möchte. Möchte er die Bildunterschrift nicht breiter als das Bild, muss du mit einer Lösung kommen. Du kannst dem Kunden auch eine Standardlösung bieten, indem du sagst, Bilder in Textelementen sind immer 50% breit, das ist auch sehr einfach, aber nicht sehr flexibel.

Zeige mir dein letztes Projekt und deine Lösung. Wenn sie mir gefällt bin ich nicht abgeneigt diese zu benutzen.

[Andreas]

Ich wüsste jetzt nicht, was gegen die Lösung mit display: inline-table spricht, sofern man den IE 6 und 7 nicht unbedingt unterstützen will lasse mich aber gerne korrigieren

Mmh, irgendetwas sträubt sich da bei mir. Tabellen haben ja ein paar Eigenarten, die man nicht unbedingt möchte. Eigenarten bei overflow, width, max-width, positioning ... Fühlt sich irgendwie falsch an. Sieht aus wie ein Hack. Aber wenn das für dich kein Problem ist und alle Anforderungen für verschiedene Viewportbreiten, Flexibilität usw. unterstützt, why not.

BTW - Who cares about IE? Selbst Microsoft sagt, man solle den IE nicht benutzen.

[Bennie]

Zeige mir dein letztes Projekt und deine Lösung. Wenn sie mir gefällt bin ich nicht abgeneigt diese zu benutzen.

Hätte ich die, dann hätte ich diesen Post ja nicht wieder hervorgeholt.
Mir war eben bis dato auch nur die JS Lösung und die von @dazzle89 gepostete bekannt.

Was ich jetzt noch probiert hatte, aufgrund Deines Hinweises war so etwas (am Bsp des Textelements)

.ce_text figure {width:min-content;}
.ce_text img{ max-width:100vw;}

Das hat bei mir funktioniert auch in Verbindung mit dem Floating, aber ob das nun besser ist als die display:table; Variante?

[Andreas]

...aber ob das nun besser ist als die display:table; Variante?

Siehe oben.

Mir war eben bis dato auch nur die JS Lösung und ...

JS hat den Nachteil, dass du bei jeder Änderung des Viewports oder Ausrichtung des Tablets|Phones nachrechnen musst.