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