Responsive img grenzenlos min-width kombi max-width und img+txt gleiche höhe

[Henry]

Hallo,

Die Fragestellung ist bestimmt verwirrend, liegt aber daran, dass es mehrere Fragen sind, als Suchbegriff aber sinnvoll sein sollte.

1. Ein Bild responsive zu bekommen ist durch max-width:100% height:auto; erst mal einfach. Was mich daran wundert ist das Verhalten der Browser.

Hier mal ein Beispiel.

Wenn man das im Editor verkleinert(mittlerer vertikaler Balken bewegen, oder Fenster ändern), passiert das, was ich auch erwarte: Das Bild lässt nahezu 0px verkleinern.

Anders sieht es aus, wenn dieser Quelltext nicht im Editor, sondern normal als Seite geöffnet wird, dann gibt es eine Grenze, die dummerweise bei dieser Bildgrösse dannn gar keinen Unterschied bringt. Warum ist das so, warum keine grenzenlose Verkleinerung?

Am einfachsten und logisch wäre ja eine Kombination von min-width und max-width, also Mindestgröße und Maximalgröße, was aber nicht zu funktionieren(Recherche & Versuche) scheint.
Oder gehst das doch irgendwie?

2. Andere Sache ist die Kombination von Bildern und Text, unabhängig vom display-status mit gleichzeitiger vertikaler Zentrierung. Dazu auch mal ein Beispiel. Funktionieren, wie erhofft, ist auf Anhieb eher selten, immer läuft's auf try & error hinaus bis es passt, aber es muss doch auch irgendwie stabil/logisch anders/immer gehen.

Die Aufgabe, die sich mir stellt ist:

Nimm einen Container(Abmessung fix/variable/keine, egal)

packe Texte(fließtext/block/inline-block/etc., Abmessungen variabel/fix/keine)

und Bilder(fließtext/block/inline-block/etc., Abmessungen variabel/fix/keine) hinein.

Danach sollte alles vertikal zentriert nebeneinander stehen und Bilder(falls responsive) sich am Viewport anpassen ohne die vertikale Ausrichtung zu ändern.

Ich meine, wie haben 2018, das ist doch bestimmt irgendwie einheitlich, (deckel passt auf jeden topf), verlässlich und einfach, ohne Tricksereien wie absolut positionieren oder ähnliches, und ohne ewiges try & error machbar?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Anders sieht es aus, wenn dieser Quelltext nicht im Editor, sondern normal als Seite geöffnet wird, dann gibt es eine Grenze, die dummerweise bei dieser Bildgrösse dannn gar keinen Unterschied bringt. Warum ist das so, warum keine grenzenlose Verkleinerung?

Frag den Hersteller deines Browsers.

Am einfachsten und logisch wäre ja eine Kombination von min-width und max-width, also Mindestgröße und Maximalgröße, was aber nicht zu funktionieren(Recherche & Versuche) scheint.

Der Schein trügt.

Oder gehst das doch irgendwie?

Ja, natürlich.

Die Aufgabe, die sich mir stellt ist:

Nimm einen Container(Abmessung fix/variable/keine, egal)

packe Texte(fließtext/block/inline-block/etc., Abmessungen variabel/fix/keine)

und Bilder(fließtext/block/inline-block/etc., Abmessungen variabel/fix/keine) hinein.

Danach sollte alles vertikal zentriert nebeneinander stehen und Bilder(falls responsive) sich am Viewport anpassen ohne die vertikale Ausrichtung zu ändern.

Ich meine, wie haben 2018, das ist doch bestimmt irgendwie einheitlich, (deckel passt auf jeden topf), verlässlich und einfach, ohne Tricksereien wie absolut positionieren oder ähnliches, und ohne ewiges try & error machbar?

Ja, natürlich. Wir haben schließlich 2018.

LLAP 🖖

[Henry]

Hallo Gunnar,

Warum ist das so, warum keine grenzenlose Verkleinerung?

Frag den Hersteller deines Browsers.

Also ist dieses Verhalten, obwohl es FF und IE betrifft, nicht so vorgesehen. Interessant.

Am einfachsten und logisch wäre ja eine Kombination von min-width und max-width, also Mindestgröße und Maximalgröße, was aber nicht zu funktionieren(Recherche & Versuche) scheint.

Der Schein trügt.

Oder gehst das doch irgendwie?

Ja, natürlich.

Ja? Aber nicht so einfach wie zb. <img src="..." style="min-width:10%;max-width:100%;">?

…ohne Tricksereien wie absolut positionieren oder ähnliches, und ohne ewiges try & error machbar?

Ja, natürlich. Wir haben schließlich 2018.

Danke für deine Mühe. Leider ist das eben genau, was ich meinte. Hier kommt wieder Flexbox/Float zum Einsatz, obwohl die Schwächen sowieso bekannt sind und im Übrigen es ja nur um eine simple Ausrichtung geht, die doch 2018 (so sollte man meinen) mit einem einzigen simplen Befehl, ähnlich vertical-align, komplett erledigt sein sollte.

Mich wundert auch, dass du als Grid-Spezialist hier nicht eine Variante damit gezaubert hast, müsste doch gehen oder?

Ich habe es mal probiert, tu mich aber schwer, solange ich die Aufgabe so einfach wie ein Tabellenkonstrukt handhaben möchte, aber vielleicht geht's ja doch?

Gruss
Henry

Nachtrag: Ist bei deinem Beispiel die fehlende viewportangabe <meta name="viewport"… Absicht gewesen?

[Gunnar Bittersmann]

@@Henry

Oder gehst das doch irgendwie?

Ja, natürlich.

Ja? Aber nicht so einfach wie zb. <img src="..." style="min-width:10%;max-width:100%;">?

Doch. Was sollte daran nicht gehen?

BTW: alt-Attribut fehlt.

Ja, natürlich. Wir haben schließlich 2018.

Danke für deine Mühe. Leider ist das eben genau, was ich meinte. Hier kommt wieder Flexbox/Float zum Einsatz

Warum auch nicht?

obwohl die Schwächen sowieso bekannt sind

Die Schwächen von Flexbox wären welche?

und im Übrigen es ja nur um eine simple Ausrichtung geht, die doch 2018 (so sollte man meinen) mit einem einzigen simplen Befehl, ähnlich vertical-align, komplett erledigt sein sollte.

Gut, es sind zwei Deklarationen: display: flex; align-items: center. Was ist dein Punkt?

„CSS kennt im Übrigen keine Befehle, bestenfalls Empfehle, ehm. ;-)“ (Orlando)

Mich wundert auch, dass du als Grid-Spezialist hier nicht eine Variante damit gezaubert hast, müsste doch gehen oder?

Wenn du flexible Boxen willst, willst du Flexbox, nicht Grid.

Du bist nicht dem Irrtum erlegen, Grid solle Flexbox ablösen, oder?

Nachtrag: Ist bei deinem Beispiel die fehlende viewportangabe <meta name="viewport"… Absicht gewesen?

Hab ich mal ergänzt. Ändert das bei einem Codepen irgendwas?

LLAP 🖖

[Henry]

Hallo Gunnar,

obwohl die Schwächen sowieso bekannt sind

Die Schwächen von Flexbox wären welche?

Da muss sich wohl einiges geändert zu haben. Als ich mich entschieden hatte ein Flexboxverweigerer zu werden, standen noch evtl. Performanceprobleme zur Diskussion, Paddingproblematik und eine Reihe von Inkompatibilitäten und Bugs. Das hat sich aber wohl weitestgehend, durch verbesserte Browser und Erneuerung des FLEXmodells geändert. Insofern, danke für den Zaunpfahl. 😉

Gut, es sind zwei Deklarationen: display: flex; align-items: center. Was ist dein Punkt?

in meinem Fall auch noch justify-content: center; flex-wrap:wrap; und das sind dann wirklich schon galaktische Textberge… 😉 Nein, alles gut, da ich jetzt kein Flexverweigerer mehr bin, ist das schon perfekt. Danke.

BTW: alt-Attribut fehlt.

siehe unten

„CSS kennt im Übrigen keine Befehle, bestenfalls Empfehle, ehm. ;-)“ (Orlando)

Jaja… guckst du, geh mitte, mach, is Befehl isso! 😉

Du bist nicht dem Irrtum erlegen, Grid solle Flexbox ablösen, oder?

Doch das dachte ich. Dachte tatsächlich das Thema Flexbox könnte man überspringen, weil abgelöst durch Upgrade.

Nachtrag: Ist bei deinem Beispiel die fehlende viewportangabe <meta name="viewport"… Absicht gewesen?

Hab ich mal ergänzt. Ändert das bei einem Codepen irgendwas?

Kommt drauf an, bei einem Codepen vielleicht, in diesem Fall aber nicht mehr als kein alt im img 😉

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Du bist nicht dem Irrtum erlegen, Grid solle Flexbox ablösen, oder?

Doch das dachte ich. Dachte tatsächlich das Thema Flexbox könnte man überspringen, weil abgelöst durch Upgrade.

Grid ist nicht dazu da, Flexbox zu ersetzen. Grid ist dazu da, Flexbox und andere CSS-Techniken zu ergänzen.

Jen Simmons erklärt’s in 4 Minuten: Flexbox vs. CSS Grid — Which is Better?

LLAP 🖖

[Henry]

Hallo Gunnar,

Jen Simmons erklärt’s in 4 Minuten: Flexbox vs. CSS Grid — Which is Better?

Ja schon mal beiläufig, ohne große Beachtung, gesehen (hattest du, glaube ich, schon mal gepostet). Sie erinnert mich immer an Amy Farrah Fowler von BBT.

Noch eine Frage. Wenn ich dem Flexcontainer keine oder eine fixe Höhe angebe ist alles OK. Besitzt der Container aber eine variable Höhe von zb. height:50vh; dann springt der Content aus dem Container und überlappt andere:

Habe zwar einiges mit shrink und grow probiert ohne Auswirkung und könnte auch einen Container drüber legen, aber bevor ich das mache oder unzählige Versuche poste, mal kurz nachgefragt ob es da vielleicht schon was gibt?

Gruss
Henry

[marctrix]

Hej Henry,

Habe zwar einiges mit shrink und grow probiert ohne Auswirkung und könnte auch einen Container drüber legen, aber bevor ich das mache oder unzählige Versuche poste, mal kurz nachgefragt ob es da vielleicht schon was gibt?

50vh ist eine fixe Höhe - in deinem Fall zu gering. Nimm statt dessen min-height…

Marc

[Henry]

Hallo marctrix,

50vh ist eine fixe Höhe - in deinem Fall zu gering. Nimm statt dessen min-height…

so habe ich das noch nie gesehen, weil relativ zum viewport, aber… Klar.
min-height == perfekt, danke.

Gruss
Henry