Bildgröße an flexibles DIV anpassen

Beitrag von **Synonym** » 26.10.2009, 13:57

Hallo zusammen,

ich hänge hier nun schon einige Zeit an einem Schönheitsfehler fest für den ich einfach keine sinnvolle Lösung finden kann.

Als Ausgangspunkt gibt es einen DIV-Container der seine Breite dynamisch zwischen 400 und 700px anpasst. Darin enthalten ist ein Bild mit der Breite 600px (quer - hochkant ist schmäler).

Im Normalfall funktioniert alles bestens. Doch wenn Besucher eine extrem kleine Bildschirmauflösung haben und das DIV auf 400px Breite verkleinert wird, dann verschwindet das Bild rechts bzw. überlagert den rechten Bereich.

width und height beim Bild auf 100% setzen ist schon mal ein guter Ansatz, doch dann wird das Bild bei voller Größe auf 700px vergrößert.

max-width bringt hier leider auch nichts, da die Bilder mal quer und mal hochkant sind.

Kann man irgendwie erreichen, dass es bei kleineren Auflösungen sich automatisch anpasst, aber gleichzeitig nicht größter als die eigentliche Bildgröße wird?

Danke und Gruß,
Ingo

von **Anzeige von ABAKUS** »

Beitrag von **Nicos** » 26.10.2009, 14:01

musst halt ne Weiche einbauen, die die Auflösung loggt! Je nach Resolution wird dann das passende Stylesheet genutzt!

Beitrag von **Synonym** » 26.10.2009, 14:30

Stehe ich da nun auf dem Schlauch?

Wie geht das dann wenn ich ein gesondertes CSS-File lade? Woher weiß ich dann wie breit das Bild maximal sein darf (Dateivorgabe)? Irgendwie muss ich da ja die offizielle Bildgröße mit auslesen und die mit einbringen. Also fixe Vorgaben im CSS, egal welche Auflösung gehen ja nicht.

Ein Bild kann auch nur 100px breit sein, der Bildschirm klein und zeigt daher das DIV nur 400px breit an. Das Bild darf dann aber auch nicht größer als 100px werden.

Also gibt es eigentlich die drei Punkte:
min-max Breite vom Div
max. Breite vom Bild (abhängig vom DIV und Bild)
offizielle Breite vom Bild

Zwei Punkte davon bekomme ich unter einen Hut, doch nicht alle drei

Edit: Derzeit versuche ich es in der Richtung

Code: Alles auswählen

echo '<script type="text/javascript">document.getElementsByTagName&#40;"img"&#41;&#91;0&#93;.style.maxWidth = "'.$breite.'px";</script>';

Also per Javascript mit übergebenem Max-Width das der offiziellen Bildbreite entspricht. Funzt aber auch noch nicht so wie es soll. Wenn JS aus ist, dann greift das 100% aus dem CSS immer, ist auch blöd. "Fallback" quasi genau falsch herum.

Edit2:
So scheint es zu gehen:

Code: Alles auswählen

echo '<script type="text/javascript">document.getElementsByTagName&#40;"img"&#41;&#91;0&#93;.style.width = "95%";;</script>';
echo '<script type="text/javascript">document.getElementsByTagName&#40;"img"&#41;&#91;0&#93;.style.height = "95%";</script>';
echo '<script type="text/javascript">document.getElementsByTagName&#40;"img"&#41;&#91;0&#93;.style.maxWidth = "'.$breite.'px";</script>';

Oder hat das irgendwelche gravierenden Nachteile?

Beitrag von **Nicos** » 26.10.2009, 14:50

naja, Du machst im Prinzip für jede Auflösung ein separates css und fragst serverseitig die Auflösung ab. ...und lieferts dann das passende css aus!

..oder hab ich das Problem nicht verstanden?

Beitrag von **Synonym** » 26.10.2009, 14:58

Nee, ich glaube Du hast es schon verstanden, nur ich die Umsetzung nicht.

...fragst serverseitig die Auflösung ab
Gut, wenn das so wäre, dann könnte ich auch die Bilder dynamisch anpassen lassen (Server kennt Auflösung, offizielle Bildgröße, den Rest kann er berechnen)

dann brauche ich aber auch kein anderes CSS

Dann würde es ja reichen wenn ich die width und height Werte am Bild ändere. Die Maximalwerte sind ja serverseitig bekannt.

Hm, das wäre aber jedenfalls auch eine Überlegung. Bildschirmauflösung serverseitig zu kennen - daran hatte ich noch gar nicht gedacht

Danke Dir!

Beitrag von **heino** » 26.10.2009, 15:06

Synonym hat geschrieben:max-width bringt hier leider auch nichts, da die Bilder mal quer und mal hochkant sind.

Entweder ich verstehe hier nicht was du damit sagen willst oder du hast einen Denkfehler. Width bzw. max-width ist immer die Festlegung für die Waagrechte, egal ob du das Bild im Quer- oder Hochformat darstellst.
Möglicherweise hilft ein zusätzlicher div-Container nur für das Bild.

Beitrag von **Synonym** » 26.10.2009, 15:17

Ja, ich glaube ich habe mich schlecht ausgedrückt oder denke schon ganz verquert.

Mit "max-width bringt hier leider auch nichts" wollte ich sagen, dass die Bilder in Querdarstellung in aller Regel 600px breit sind. Bilder die hochkant sind haben jedoch eine Breite von z.B. 400px.

Also kann ich nicht einfach für die Anpassung ein width:100% und max-width:600px setzen, da es nicht immer stimmen würde. Die Aussage war darauf bezogen, dass die Angaben im CSS-File stehen, das ja nicht wissen kann wie groß das Bild in Wirklichkeit ist.

Mache ich es so wie in meinem Edit2 von oben, dann geht das schon mit max-width, nur das ist kein fixer Wert, sondern hängt vom eigentlichen Bild ab.

Alternativ auch der Ansatz von Nicos, denn dann könnte der Server die entsprechende Größe berechnen.

Ein extra Div, ohne weitere Lösungsansätze hätte ja genau das gleiche Problem. Die Größe müsste ja auch dort von klein bis groß automatisch variieren, dürfte aber die eigentliche Bildgröße nicht überschreiten.

Beitrag von **Lord Lommel** » 26.10.2009, 15:19

Mach das doch mit Javascript.

Beitrag von **Synonym** » 26.10.2009, 15:22

@Lord Lommel
Ja, das teste ich ja gerade aus, siehe mein Edit2 weiter oben. Aber den anderen Ansatz werde ich mir auch noch mal ansehen.

Beitrag von **heino** » 26.10.2009, 15:25

Lord Lommel hat geschrieben:Mach das doch mit Javascript.

Richtig, das ist ein simpler Vergleich und eine Zusweisung per js.

Beitrag von **Lord Lommel** » 26.10.2009, 15:25

Oh, hatte ich übersehen. Machs doch aber bitte in eine Funktion, von dem da oben kriegt man Augenkrebs.

Beitrag von **Synonym** » 26.10.2009, 15:28

Ja, das wird es noch wenn es so funktioniert wie es soll. Ein Fehler ist auch drinnen, da ist ein ; zu viel

Beitrag von **Nicos** » 26.10.2009, 15:39

...so kannst es auch machen, aber dann brauchst Du ein recht hochauflösendes Bild, um es hin und her "verzerren" zu können, ohne dass es pixelig wird!
mit versch. css ist es einfacher, dann kannst Du dort bzw. auf dem Server einfach versch. optimierte Bilder hinterlegen!

Beitrag von **heino** » 26.10.2009, 15:46

Die js-Lösung hat gegenüber der serverseitigen Lösung den Vorteil, dass die Bildgröße sofort angepasst wird wenn der Nutzer die Größe des Browserfensters verändert.

@Nicos
Wie viele "optimierte" Bildchen wills du hinterlegen?
Da Synonym die Bilder allenfalls verkleinern will/muss wird nichts pixelig.

Beitrag von **Synonym** » 26.10.2009, 15:47

@Nicos
Ich werde mir Deinen Vorschlag mal ansehen, denn das mit der Qualität ist mir so durchaus bewusst.

Doch wie am Anfang gesagt, das ist nur selten der Fall (Auflösung 800x600 und kleiner) und daher eher unwirtschaftlich extra nochmals Bilder abzulegen (sind derzeit gut 20.000). Das kommt vielleicht 1 mal bei 1000 Besuchern vor. Die sollen bzw. müssen dann eben damit leben. Und die die kein JS aktiviert haben, bei denen ist es eben wie bisher.

Aber dynamische Anpassung per PHP wäre eine Option in Bezug auf Deinen Vorschlag.