Responsive Headergrafik mit figure

1 Martin

Hallo Jörg,
ich baue meine alte WP-Site lokal im VSC mit reinem HTML/CSS nach und beschäftige mich gerade mit der Responsivmachung der Bilder (vorerst ohne Media Queries, die kommen aber noch).

Das Groblayout habe ich festgelegt mit grid-template-areas.
Normales Drei-Spalten-Layout, ingesamt 1150px breit.
mobile über desktop first (soll so bleiben).

Der header/Headergrafik hat im Grid die komplette Breite aller drei Spalten zugeordnet (braucht sie mit nur 700px aber nicht). Sie ist ein normaler Bildlink, der in figure und das figure im Header-Element steckt:

    
<header>
  <figure class="...">
     <a class="..."  href="...">
       <img class="" src="..." width="700" height="250"></a>
  </figure>
</header>

Um das Bild responsiv zu machen, bekommt das img im Stylesheet das übliche max-width: 100% und height auto.

Die Frage ist nun aber, was ich mit dem figure am besten mache, zumal die Grafik responsiv nur KLEINER wird und ich nach meinen Recherchen eine responsive %-width für figure brauche.

img.grafik {
  max-width: 100%; 
  height: auto; 


figure.headerbild {
    width: 100%;
    max-width: 700px; 
}
}

Ist das so gut? Ich merke keinen Unterschied, wenn das width: 100% beim figure wegbleibt, soll ich es trotzdem drin lassen?

Der FF-Inspector zeigt mir rechts unten bei den vorhandenen "Regeln" die width:100% gar nicht an (fehlt einfach), nur wenn ich es im CSS unter der max-width platziere!?

Grüße,

Martin

2 Jörg Kruse

Die Klammern sind in deinem Code falsch verschachtelt, so sollte es richtig sein:

img.grafik {
  max-width: 100%; 
  height: auto; 
}

figure.headerbild {
    width: 100%;
    max-width: 700px; 
}

Aber ich nehme an, das war ein Übertragungsfehler?

Die Frage ist nun aber, was ich mit dem figure am besten mache, zumal die Grafik responsiv nur KLEINER wird und ich nach meinen Recherchen eine responsive %-width für figure brauche.

Wieso benötigst du diese? Ohne Angabe von width richtet sich die Breite eines Elements nach der Breite seines Kindelements, also in diesem Fall dem Link, dessen Breite sich wiederum aus der des Bildes ergibt. Ggf. musst du margin und padding von figure.headerbild noch auf 0 stellen.

Der Header wird als Grid-Element auf die Breite des Grids gedehnt. Mit justify-self kannst du den Header aber auch ungedehnt links, rechts oder mittig positionieren, z.B.:

header {
  justify-self: center;
}

dadurch sollte die Header-Grafik mittig erscheinen, wenn die Breite des Grids größer als 700px ist.

Ich merke keinen Unterschied, wenn das width: 100% beim figure wegbleibt

Ja, das benötigst du denke ich nicht.

3 Martin

Danke für die schnelle Reaktion.

Aber ich nehme an, das war ein Übertragungsfehler?

Ja genau.

Wieso benötigst du diese?

Weil das übliche max-width 100% und height auto beim img zusätzlich eine Bezugsgröße für seine responsive Anpassung braucht. Und das ist sein Eltern-El. und Blockelement "figure". Das img verkleinert sich responsiv nur parallel und abhängig vom figure. Wäre das auf eine Pixel-Breite fixiert, könnte sich auch das img nicht verändern und schrumpfen.

So habe ich es mir vor Jahren mal aufgeschrieben und fand das verständlich und sinnvoll. Ich hatte Beispiele aus Büchern und wenn ich jetzt im Web suche, wird bei "meiner" Frage ebenfalls der Rat mit max-width: ...Px beim figure gegeben. Und sogar meistens mit width 100% kombiniert.

Aber: Ich habe es ausprobiert und du hast Recht, wenn ich gar nichts festlege für figure, weder max-width 700px noch i.V.m. width 100%, passt sich die Headergrafik mit klein gezogenem Browserfenster genauso an wie "mit".

Der Unterschied ist, dass beim "nichts festlegen für figure" das figure seine Box ganz normal als BE bis nach rechts streckt. Nicht das Bild selbst, das bleibt ansehnlich, nur die Box.

Dieser Unterschied ist manchmal ein 2. Grund für eine max-width-Px-Festlegung beim figure. Man will durch eine width-Angabe beim figure die Boxstreckung eliminieren, weil noch Text oder ein weiteres Bild daneben erscheinen soll (float oder display: inline-block).
Speziell hier beim headerbild ist das aber egal, weil da nichts mehr kommt daneben.

Ohne width beim figure gilt also der default-Wert auto und der belässt zwar die Boxstreckung, aber der figure-Content (Bild, Text) wird ganz normal angezeigt ("Browser calculates the needed space")?
Ich dachte so ganz pauschal, dass sich width immer "irgendwie" auf das Eltern-El. bezieht, auch der Content. Und im Zweifelsfall lieber immer etwas festlegen, und wenn es nur zur Klarheit für einen Hobby-Coder ist.

4 Jörg Kruse

Ich hatte noch den Denkfehler, dass figure ein Grid-Element ist, aber es ist ja wie du schreibst ein Blockelement.

Speziell hier beim headerbild ist das aber egal, weil da nichts mehr kommt daneben.

Benötigst du das figure Element hier dann überhaupt? du könntest das img auch direkt im header unterbringen. Die Breite und Position von header kannst du als Grid-Element wie oben beschrieben mit justify-self anpassen. So als ganz einfaches Test-Beispiel mit body als Grid:

<body>
    <header>
        <a href="#">
            <img class="grafik" src="..." width="700" height="250">
        </a>
    </header>
</body>

body {
    display: grid;
    width: 1150px;
    max-width: 100%;
    margin: 0 auto;
}
header {
    justify-self: center;
}
img.grafik {
    max-width: 100%;
    height: auto;
}

header hat hier die gleiche Breite wie das Bild.

PS: die E-Mail-Adresse, die du hier in deinem Account angegeben hast, gibt es nicht mehr, deswegen kommen die Benachrichtigungen vom Forum nicht an.

5 Martin

Benötigst du das figure Element hier dann überhaupt?

Ich habe auf der Site ca. 7 verschiedene Bild-Varianten, von einfachen Deko-Trenner-Grafiken, über Headergrafik und von Text umflossenen Einzelbildern bis hin zu zwei/drei Contentbildern nebeneinander und Social Media Buttons in der Sidebar.

Ich möchte alle Bildvarianten soweit möglich einheitlich halten und habe mir daher vorgenommen, das semantisch sprechende figure/figcaption als Eltern-El. bzw. "enger Container" für img regelmäßig zu nehmen. Zumal ich auch sonst die semantischen Strukturelemente verwende (header, footer, main, article ect.) und auf der WP-Site auch schon immer einen "engen Container" hatte, war/ist halt p oder div bislang.

Außerdem kann ich Accessibility-features wie group-role bei zusammengehörenden Bildern oder figure plus figcaption verwenden.
Und ich habe mir vor ca. 5 Jahren nicht nur bezüglich der Bilder schon mal alles ganz gründlich erarbeitet und aufgeschrieben und weiß eigentlich ziemlich genau, was ich nun wie haben will. Und theoretisch weiß ich auch, wie es gecoded wird (abgesehen von einem einzigen wohl einfachem JavaSkript, das ich für das DD-Menü brauchen werde).

Aber wenn du 5 Jahre absolut nichts mehr machst damit, dann brauchst du wieder einige Zeit, um alles durchzulesen und zu verstehen und wenn du es dann umsetzt, tauchen halt trotzdem Fragen auf. Ich habe damals z.B. 13 sehr anschauliche Beispiele mit figure und verschiedenen Bildvarianten aufgeschrieben. Ich erwähne das in meinen Unterlagen öfters, aber wo zum Geier sind die? Gestern habe ich sie in dem großen Stapel von Papierausdrucken aus dem Web von damals gefunden, im Schrank tief vergraben, aber eben zum Glück alles aufgehoben... :).
Jedes HTML-El. ist ein Kästchen, das in einem anderen Kästchen steckt und das wieder in einem usw. Jedes HTML-EL. hat für sich eigentlich mehrere Kästchen (Content, border usw.) und immer stellt sich die Frage nach Block- oder Inline-El., width hier, width da...

Ohne WP/Theme/PHP/Plugins nur noch mit HTML/CSS, mit mehr Semantik und Accessibility als vorher, aber schon alles eher einfach und für mich verständlich gestaltet. Und im Stylesheet sehr großzügig mit Kommentaren versehen...

Nur zur Sicherheit: Im letzten post sehe ich das soweit alles richtig und kann es mir im Grunde jetzt aussuchen, ob ich es ganz ohne figure-width oder nur mit max-width 700px oder ggf. max-width 700px+width 100% fürs figure mache?

PS: die E-Mail-Adresse, die du hier in deinem Account angegeben hast, gibt es nicht mehr, deswegen kommen die Benachrichtigungen vom Forum nicht an.

Kann ich ändern, den Account habe ich schon ewig.

6 Jörg Kruse

Ein figure hat auch eine semantische Bedeutung, man könnte es wohl am besten als "Schaubild" übersetzen.

Definiert ist figure im HTML-Standard folgendermaßen:

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

Für das Referenzieren eines figure im Inhalt (mit und ohne Link) werden auch Beispiele aufgeführt:

https://html.spec.whatwg.org/multipage/dom.html#referenced

Gerade in wissenschaftlichen Texten finden sich manchmal Verweise auf Schaubilder wie z.B. "siehe Schaubild 1", "siehe Schaubild 2", im Englischen "figure 1", "figure 2".

Ein Bild im Header wird normalerweise aber nicht im Inhalt referenziert?

Nur zur Sicherheit: Im letzten post sehe ich das soweit alles richtig und kann es mir im Grunde jetzt aussuchen, ob ich es ganz ohne figure-width oder nur mit max-width 700px oder ggf. max-width 700px+width 100% fürs figure mache?

Zum Test habe ich noch ein figure als Blockelement dazwischengeschoben:

<body>
    <header>
        <figure>
            <a href="#">
                <img class="grafik" src="..." width="700" height="250">
            </a>
        </figure>
    </header>
</body>

body {
    display: grid;
    width: 1150px;
    max-width: 100%;
    margin: 0 auto;
}
header {
    justify-self: center;
}
figure {
    margin: 0;
}
img.grafik {
    max-width: 100%;
    height: auto;
}

Wenn der Margin auf 0 gesetzt wird, stimmt die Breite des Blockelements figure mit der Breite des Elternelements header überein, welches als nicht gestrecktes Grid-Element die Breite wiederum vom Urenkel img übernimmt. Die Angabe einer (maximalen) Breite braucht es für figure in diesem Fall nicht.

Etwas anders liegt der Fall, wenn header gestreckt ist:

header {
    justify-self: stretch;
}

Dann nehmen header und figure die Breite des Grid-Containers ein.

7 Martin

margin und padding sind durch das CSS-Reset zunächst mal immer eliminiert bei mir.

Dein Test bestätigt, was ich gestern festgestellt habe durch einfachen Test auf dem PC, als ich die px-width-Angabe bei figure ganz entfernt habe:
Es kommt aufs Gleiche in diesem Fall raus und funktioniert auch ohne diese figure-Angabe, weil das defaultmäßige "width auto" beim figure sich dann so auswirkt.

Ist immer gut, wenn man mehrere Optionen hat.

Mir ging es mit meiner Nachfrage im letzten post darum, dass ich die Funktionsweise richtig verstanden habe, wenn für img dieser übliche Standardcode zu Zwecken der Responsivität festgelegt wird, also dieses "max-width: 100%" und "height: auto".

Mit Funktionsweise meine ich, dass es mit diesem responsiven img-Standardcode dann grundsätzlich und prinzipiell auf das Eltern-El. als Bezugselement (bei mir figure) ankommt. Und man dann dort eben den max. Px-Wert angeben kann, der nicht überschritten werden soll, aber verkleinert wird responsiv.

Hier bei der Headergrafik macht es keinen Unterschied im Ergebnis, aber ich habe wie gesagt viele Bildvarianten, werde den responsiven img-Standardcode oft verwenden und möchte einheitlich immer "img im Eltern-El. figure" verwenden.

Ein Bild im Header wird normalerweise aber nicht im Inhalt referenziert?

Was meinst du damit?
Der Link ist der Standardlink zur Startseite, den man in einer Headergrafik in der Regel ermöglicht.

8 Jörg Kruse

Mit Funktionsweise meine ich, dass es mit diesem responsiven img-Standardcode dann grundsätzlich und prinzipiell auf das Eltern-El. als Bezugselement (bei mir figure) ankommt. Und man dann dort eben den max. Px-Wert angeben kann, der nicht überschritten werden soll, aber verkleinert wird responsiv.

Wenn du ein Grid verwendest, würde ich die maximale Breite im Grid festlegen. Als Bezugsgröße vererbt sich diese auf darunterliegende Elemente wie das figure und das Bild. In meinem Beispielcode hat das Grid eine Breite von 1150px und maximal 100% (in Fall von body bezogen auf den Viewport). Wenn header bei dir alle drei Spalten einnimmt, ist damit auch dessen (maximale) Breite definiert, und eine Breitenangabe ist nicht notwendig - es sei denn header soll kleiner sein.

Ein Bild im Header wird normalerweise aber nicht im Inhalt referenziert?

Was meinst du damit?

Das war eigenlich eine rhetorische Frage, die ich im Fall einer Header-Grafik mit Nein beantworten würde. Mit Referenzieren ist gemeint, dass irgendwo auf der Seite im Text Bezug genommen wird auf das figure. Beispiel:

<p>Blablabla. Nach 2020 stiegen die Zahlen dann stark an. Veranschaulicht wird dies in Diagramm 4. Blablabla</p>

<figure>
    <img src="diagramm-4.png" alt="Diagramm 4">
    <figcaption>Diagramm 4</figcaption>
</figure>

Das wäre der typische Anwendungsfall für figure, wie er auch im HTML-Standard vorgesehen ist.

Abgesehen davon wird figure aber auch häufig für Bilder mit Bildunterschriften verwendet, die nirgends referenziert werden. Du kannst figure auch für nicht referenzierte Bilder ohne Bildunterschriften verwenden. Das ist valider Code, wenn auch nicht semantisch im Sinne des Erfinders.

9 Martin

Mit Referenzieren ist gemeint, dass irgendwo auf der Seite im Text Bezug genommen wird auf das figure.

Nein, das ist ein normales Headerbild.
figure ist seiner Definition nach für alle Arten von Bildern und Abbildungen geeignet, mit und ohne Caption bzw. "Referenzierung" (ich dachte, du meinst damit das src im tag).
Und davon habe ich wie gesagt eine Reihe von Varianten.

Wenn ich eine reine Trennergrafik ebenfalls in ein figure stecke, habe ich semantisch damit ehrlich gesagt kein Problem. Zum einen ist eine solche Grafik kein relevantes Objekt für Semantik und zum anderen hatte ich vorher dafür ein div/p, was semantisch noch schlechter ist.
figure besagt zumindest "das ist eine Grafik/Abbildung" und mit dem img und seinem leeren alt samt fehlendem titel attr. wird klar, dass es eine unwichtige Deko-Grafik ist.

Das Grid ist gesetzt, das werde ich sicher verwenden. Dein Ansatz, vom Grid her quasi von oben nach unten die Breiten der figure/img-Ur-Enkel zu definieren, ist mir neu. Vertrauter ist mir das img/figure-Verhältnis, wie im letzten post beschrieben. Erstaunlich, wie viele Wege nach Rom führen.

Ich lasse es vorerst mal bei dem mir vertrauten Weg mit dem Standardcode beim img und einer konkreten Px-Bezugs-width beim figure. Das verstehe ich am besten und alle meine Unterlagen und anderen Umsetzungen gehen im Zweifelsfall von dieser Methodik aus.

Das oft im Web gefundene, zusätzliche "width 100%" beim figure lasse ich aber weg. Das bezieht sich dann ja auf das Eltern-El. vom figure, also z.B. <header> und widerspricht der gleichzeitigen Px-width beim figure: Das figure soll einerseits als quasi "2. Haut" des img max. 700px haben und gleichzeitig 100% vom Eltern-El.? Ich glaube, das macht gerade bei meinem "responsiv nur kleiner werden" keinen Sinn, oder?

nach oben

Responsive Headergrafik mit figure

Beitrag schreiben (als Gast)