Responsives Headerbild mit img und zwei width-Stylings im figure?
Hallo,
ich habe eine typische, breite Headergrafik, die ganz oben auf der Seite ist und nichts anderes mehr daneben stehen hat.
Die Seite (Wordpress) soll nun mit reinem HTML/CSS nachgebaut werden und die Headergrafik responsiv werden mit dem typischen max-width: 100% beim img.
Blockelement für img ist ein figure und da sich die Grafik responsiv nur verkleinern soll, hätte ich dem figure ein "max-width: 700px" gegeben, siehe unten.
Jetzt habe ich aber ein genau meinen Fall betreffendes Beispiel bei stackoverflow gefunden, siehe https://stackoverflow.com/questions/37446221/fluid-image-that-is-not-wid ..., wo beim figure zusätzlich zur max. Px-Breite "width: 100%" steht, wozu soll das gut sein? Bei mir ist das Eltern-El. des figure das noch breitere header-Element.
Zumindest in meinem Fall macht das keinen Sinn und ich kann das zusätzliche width: 100% beim figure weglassen, oder?
ich habe eine typische, breite Headergrafik, die ganz oben auf der Seite ist und nichts anderes mehr daneben stehen hat.
Die Seite (Wordpress) soll nun mit reinem HTML/CSS nachgebaut werden und die Headergrafik responsiv werden mit dem typischen max-width: 100% beim img.
Blockelement für img ist ein figure und da sich die Grafik responsiv nur verkleinern soll, hätte ich dem figure ein "max-width: 700px" gegeben, siehe unten.
Jetzt habe ich aber ein genau meinen Fall betreffendes Beispiel bei stackoverflow gefunden, siehe https://stackoverflow.com/questions/37446221/fluid-image-that-is-not-wid ..., wo beim figure zusätzlich zur max. Px-Breite "width: 100%" steht, wozu soll das gut sein? Bei mir ist das Eltern-El. des figure das noch breitere header-Element.
Zumindest in meinem Fall macht das keinen Sinn und ich kann das zusätzliche width: 100% beim figure weglassen, oder?
img {
max-width: 100%;
height: auto;
}
figure {
width: 100%; /* wozu? */
max-width: 700px;
}
Kommentieren
Teilen
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 673077
Url: https://administrator.de/forum/responsives-headerbild-mit-img-und-zwei-width-stylings-im-figure-673077.html
Ausgedruckt am: 30.05.2025 um 00:05 Uhr
