Aloha ;)

Eine Idee hätte ich da noch. Du kennst ja das Seitenverhältnis des Bilds. Und du kennst die Breite in %, die es nachher einnehmen soll. Es sollte also möglich sein, die Höhe in % über einen simplen Dreisatz zu berechnen. Diese Höhe kannst du dann sowohl Bild als auch div verpassen und du hast dann einerseits das Bild in der Größe, das es ohnehin hätte und die div genau gleich "hoch" (groß).

Bleibt noch das Problem mit margin, padding und Co. Das ist mit CSS nicht unproblematisch zu lösen. So wie ich es gerade sehe (vielleicht übersehe ich auch etwas) hast du zwei Möglichkeiten:

1. Wegstreichen von border, margin und co. Border könntest du noch durch outline ersetzen, outline wird imho nicht in die Box eingerechnet.

2. Angabe von margin und padding in %, Ersetzen von border durch outline (siehe 1.) Dann kanst du die width und height der div so anpassen, dass du je beide padding und margin-werte noch abziehst und erhältst auch das was du haben willst. Zwar variiert der Abstand zwischen Text und rahmen dann mit der Fensterbreite (und Höhe), das ist aber imho die einzige "sichere" möglichkeit, wenn du Ungenauigkeiten vermeiden willst.

Noch ein letztes: Wenn du die Boxen absolut auf die Fensterbreite beziehen willst und diese nicht Kind eines wie auch immer gestylten Elternelement sein sollen, solltest du über die Verwendung von vm und vh als Einheit statt Prozent nachdenken. % geht natürlich schon auch und ist für eine gewisse Zeit im Sinne der Abwärtskompatibilität vielleicht noch sicherer... Ich weiß nur aus eigener Erfahrung, dass ich in der Vergangenheit an vielen Stellen mit % gearbeitet habe an denen ich eigentlich korrekterweise vm und vh gemeint habe ;) Natürlich ist die Anzeige u.U. dieselbe.

Grüße,

RIDER