CSS: Bildhöhe an verfügbaren Darstellungsbereich anpassen

Zur Kurzweil, oder falls jemand eine Idee dazu hat:
Zu folgendem Problem habe ich bislang keine einfache Lösung gefunden (was dem bislang am nächsten kommt, ist eine Stilvorlage mit knapp 50 teils ineinander verschachtelten Medienanfragen (media-queries):
Gegeben sei ein XHTML-Dokument mit zwei wesentlichen Komponenten, ein langes Gedicht und eine Graphik (SVG-Fragment, skalierbar, ein object oder img führt aber vermutlich zu einem sehr ähnlichen Problem).
Sofern genug Platz für Gedicht und Graphik nebeneinander ist (Gedicht hat eine Breite von etwa 22em, Bild ist frei skalierbar, Aspektverhältnis doppelt so hoch wie breit, präsentierte Breite sollte mindestens 4em sein), sollten die auch nebeneinander angeordnet werden und zwar so, daß das Bild die volle Höhe des Darstellungsbereiches einnimmt (nur weniger, wenn die Breite nicht reicht, liegt die Gesamtbreite des Darstellungsbereiches unterhalb von sagen wir mal 26em, sollen Gedicht und Graphik untereinander angeordnet werden, Bild sollte sich dann wieder so skaliert werden, daß es im Darstellungsbereich komplett sichtbar und möglichst groß ist).

Klar, einiges davon kann man mit Medienanfragen ganz gut machen, insbesondere aber die automatische Anpassung eines Dokumentteiles an die Höhe des verfügbaren Darstellungsbereiches scheint mir mit CSS noch immer recht schwierig zu sein.
Auch für SVG allein ist die Anpassung der Größe an den verfügbaren Darstellungsbereich recht einfach, erst die Kombination mit Text und CSS macht es kompliziert, weil der Text ja nicht mitskalieren soll.

Ideen?

Zusatz: Ich habe gerade entdeckt, daß es mit img oder object wirklich etwas einfacher ist als direkt bei einem SVG.Fragment in einem div oder figure als Container. Offenbar liegt das an Implementierungsfehlern einiger Darstellungsprogramme, die das SVG nur von der Breite, nicht aber von der Höhe anpassen. Wird hingegen ein SVG per img oder object eingebunden, so wird bei der Skalierung des SVG sowohl Höhe als auch Breite berücksichtigt. Wirklich elegant ist meine Lösung da aber auch noch nicht.

[quote=“hoffmann”]Zur Kurzweil, oder falls jemand eine Idee dazu hat:
Zu folgendem Problem habe ich bislang keine einfache Lösung gefunden (was dem bislang am nächsten kommt, ist eine Stilvorlage mit knapp 50 teils ineinander verschachtelten Medienanfragen (media-queries):
Gegeben sei ein XHTML-Dokument mit zwei wesentlichen Komponenten, ein langes Gedicht und eine Graphik (SVG-Fragment, skalierbar, ein object oder img führt aber vermutlich zu einem sehr ähnlichen Problem).
Sofern genug Platz für Gedicht und Graphik nebeneinander ist (Gedicht hat eine Breite von etwa 22em, Bild ist frei skalierbar, Aspektverhältnis doppelt so hoch wie breit, präsentierte Breite sollte mindestens 4em sein), sollten die auch nebeneinander angeordnet werden und zwar so, daß das Bild die volle Höhe des Darstellungsbereiches einnimmt (nur weniger, wenn die Breite nicht reicht, liegt die Gesamtbreite des Darstellungsbereiches unterhalb von sagen wir mal 26em, sollen Gedicht und Graphik untereinander angeordnet werden, Bild sollte sich dann wieder so skaliert werden, daß es im Darstellungsbereich komplett sichtbar und möglichst groß ist).

Klar, einiges davon kann man mit Medienanfragen ganz gut machen, insbesondere aber die automatische Anpassung eines Dokumentteiles an die Höhe des verfügbaren Darstellungsbereiches scheint mir mit CSS noch immer recht schwierig zu sein.
Auch für SVG allein ist die Anpassung der Größe an den verfügbaren Darstellungsbereich recht einfach, erst die Kombination mit Text und CSS macht es kompliziert, weil der Text ja nicht mitskalieren soll.

Ideen?

Zusatz: Ich habe gerade entdeckt, daß es mit img oder object wirklich etwas einfacher ist als direkt bei einem SVG.Fragment in einem div oder figure als Container. Offenbar liegt das an Implementierungsfehlern einiger Darstellungsprogramme, die das SVG nur von der Breite, nicht aber von der Höhe anpassen. Wird hingegen ein SVG per img oder object eingebunden, so wird bei der Skalierung des SVG sowohl Höhe als auch Breite berücksichtigt. Wirklich elegant ist meine Lösung da aber auch noch nicht.[/quote]

Img wird halt automatisch berechnet div container musste manuell setzen…

Das ist ungefähr so hilfreich wie ‘mußt du machen, damit es passiert’ - du beschreibst ja nicht, wie man den Brauser dazu veranlaßt, das automatisch wie gewünscht zu berechnen ;o)

Klar, die Breite von dem Gedicht setze ich natürlich auf zum Beispiel 22em fest, wenn die Breite des Anzeigebereiches dafür ausreicht (Medienanfrage). Der Rest steht dann für das Bild zur Verfügung. Per Medienanfrage wird dann entschieden, ob neben dem Gedicht ausreichend Platz für das Bild ist. Ich habe inzwischen eine Lösung mit Längenangaben aus dem Arbeitsentwurf für das CSS3-Modul für Maßeinheiten, verwendet sowohl auf den Anzeigebereich bezogene Maßeinheiten für Höhe und Breite als auch die neue Methode calc() um etwas zu berechnen. Da es sich aber erst um einen Arbeitsentwurf handelt, braucht man da einige Medienanfragen, um das näherungsweise automatisch anzupassen .
img oder object muß man übrigens wohl doch nicht verwenden, man kann das SVG-Fragment auch direkt ins XHTML-Dokument schreiben. Man sollte allerdings width und height explizit mit 100% angeben, weil einige Darstellungsprogramme offenbar fehlerhaft sind und height nicht wie
spezifiziert automatisch auf 100% setzen, wenn die Höhe nicht angegeben ist, sondern irgendeinen Phantasiewert nehmen.

@netsplit: Wenn du schon üblicherweise nicht mehr als einen knappen Satz (der selten hilfreich scheint) beizutragen hast – könntest du dann bitte wenigstens die ständigen, unnötigen Vollzitate bleiben lassen?

Danke.

Nja ich hab nur die Ursache geschrieben, warum dies so ist wie es ist:) Also kann man sich Gedanken machen was man machen könnte und mal googlen.Da ist doch auch ein großer lerneffekt dabei, bringt ja nichts wenn man nur Lösungen bekommt und weiß nicht um was es da geht…

Das brauchst du jemandem wie hoffmann aber nicht erzählen …

Und darüber hinaus kann man dein „warum das so ist“ auch bestensfalls als laienhaft ausgedrückt bezeichnen – mehr als „das ist halt so“ ist es in der Tat nicht (das eigentliche Warum erklärst du auch nicht mal ansatzweise).

Du hast also absolut Nullkommanull zur Lösung beizutragen, nicht mal einen Vorschlag oder Ansatz beizusteuern – aber musstest mal wieder einen deiner Einzeiler absondern?

Das kannst du dir echt sparen (nicht nur hier, auch bei etlichen anderen „Antworten“ die ich hier schon von dir gesehen habe).

Ach ich trag nicht zur Lösung bei und dein geflame hier trägt dann doch zu einer lösung bei ok :smiley: . Wauh einige beiträge haste von mir gesehen , und dann gleich so ein Vorurteil dann sind dir gewisse Antworten von mir auch entgangen wo zu einer Lösung beitragen.

Die Antwort auf , wozu man Session via MYsql für ein Loginscript braucht, war schon eine lustige Antwort und war völlig neben dem Thema…

Soory aber ich kann dich nicht für ernst halten :wink:

Das soll kein Geflame sein.
Und wenn du auch sinnvolle Antworten hier beizutragen hast, dann ist das schön; ich habe aber von dir in letzter Zeit einige hier gesehen, die es nicht waren, sondern eben die angesprochenen Einzeiler mit Allerwelts-Statements – wenn du dir diese also vielleicht mal eher verkneifen könntest, wäre das echt schön.

(Und ich bin ja, wenn ich mich recht erinnere, auch nicht der erste, der dich darauf anspricht.)