Frage zum Wiki-Artikel „Layout mit Flexbox“

[Joachim]

Hallo und danke für eure tolle Seite!

Ich erarbeite mir eine Internetseite aufgrund dieser Basis:

https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Layout_mit_Flexbox

Wenn ich aber nun ein image mittels width: 100%; und height: auto; einbinde, verzerrt sich mein Bild in der Höhe. Gehe ich richtig in der Annahme, dass dies mit der Funktion flex, und flex-flow zu tun hat? Bzw. wie kann ich das Problem lösen?

Vielen dank für euren Ratschlag!

Gruß Joachim

[Matthias Scharwies]

Servus!

Wenn ich aber nun ein image mittels width: 100%; und height: auto; einbinde, verzerrt sich mein Bild in der Höhe.

Gehe ich richtig in der Annahme, dass dies mit der Funktion flex, und flex-flow zu tun hat?

Ja, hier in Stackoverflow wird das Bild in ein div gepackt und erhält nur eine Breite und keine Höhenangabe.

Herzliche Grüße

Matthias Scharwies

[Joachim]

Hallo Matthias,

danke für die schnelle Antwort - hab das versucht, aber das löst mein Problem nicht... früher hab ich meine responsive Layouts mittels Div's und eben bei Bildern mit den angaben width: 100%; und height: auto; aufgebaut - so passte sich das Bild immer automatisch den Gegebenheiten an… Hier klappt das irgendwie nicht... die Breite passt sich an - doch die Höhe eben nicht… Es verzerrt mir das komplette Bild…

[Gunnar Bittersmann]

@@Joachim

Wenn ich aber nun ein image mittels width: 100%; und height: auto; einbinde, verzerrt sich mein Bild in der Höhe. Gehe ich richtig in der Annahme, dass dies mit der Funktion flex, und flex-flow zu tun hat?

Mit flex-flow wohl weniger. Das img ist ein Flexitem? Dann sollte align-items nicht stretch sein – zumindest nicht für dieses Item: align-self.

LLAP 🖖

[Joachim]

mit deinem Tip konnte ich das Problem lösen:

.header_img {
	width: 100%;
	height: auto;
	align-items: flex-end;
}

ist das der richtige Ansatz? So wird das Bild zumindest nicht verzerrt und korrekt dargestellt.

Danke euch vielmals!