Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.08.2020, 13:48
hatschiii hatschiii ist offline
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard Dynamische Text-Image Boxen

Bin gerade dabei in Wordpress von Elementor auf Gutenberg zurück zu gehen weil Elementor einen riesen Overhead an Code erzeugt. Nun habe ich eine "Box" die etwas tricky ist und die ich nicht hin bekomme. Vermutlich am einfachsten mit einem Custom HTML in Gutenberg

Denke das ganze muss n DIVs gemacht werden. Links (orange Box) Tet und rechts ein Bild.

Tricky ist, das beide Boxen zusammen 100% Breite ergeben sollen. Das Elternelement ist 1400px breit.
Wird jetzt der Bildschirm schmäler, beispielsweise 1000px, soll das Ganze skallieren. Dabei muss das Bild immer 100% der Höhe der gesamten Box besitzen und die Höhe wird vom Zeilenumbruch bestimmt.

Wenn die orange Box beispielsweise 75% Breite und das Bild 25% Breite besitzt bestimmt die Höhe der Orangenen Box die Bildhöhe... Wobei hier ja auch noch das Seitenverhältnis in's des Bildes ins Spiel kommt.

Ab einer Bildschirmbreite von sagen wir mal 500 pixel sollen die beiden Elemente Textbox und Bild untereinander stehen (Bild unter dem Text) und das Bild 100% Breite (und dem Bild-Seitenverhälnis entsprechende Höhe)

Hoffe hier kann jemand einem DIV / CSS Anfänger etwas helfen. Layout zur Verdeutlichung im Anhang
Angehängte Grafiken
Dateityp: jpg box.jpg (90,0 KB, 5x aufgerufen)
Mit Zitat antworten
Sponsored Links