Hilfe ! Maximale Größe eines Bildes

[depp]

moin

wie kann ich folgendes problem lösen.
auf meiner seite werden bilder von usern angezeigt.
dabei sind leider nicht alle in einem geeingneten format.
dies stellt insbesondere ein problem dar, wenn sie extrem groß sind und dadurch die darstellung einer tabelle o.ä. verpfuschen. diese sollten daher etwas begrenzt werden.
zu kleine bilder dürfen jedoch nicht verzerrt werden, sondern sollen ihre größe beibehalten.

nun brauch ich also ne lösung, um ein maximum der breite festlegen zu können, wobei dies kein minimum sein darf!
kann man evt. irgendwie abstellen, dass bilder gestreched werden?
was wäre Euer vorschlag?
wenn möglich mit html oder css. wenn unvermeidbar js :-(

danke

[Sven Rautenberg]

Moin!

was wäre Euer vorschlag?
wenn möglich mit html oder css. wenn unvermeidbar js :-(

Weder noch, würde ich meinen. Serverseitige Aktivitäten sind notwendig. Es ist empfehlenswert, die Userbilder alle durch einen Konverter laufen zu lassen. Das macht die zu großen Bilder dann handlich klein (auch hinsichtlich der Dateigröße - niemand ist gehindert, ein zwei Megabyte großes Megapixel-Digicam-Bild hochzuladen, und den Traffic bezahlst dann du), und die kleinen Bilder könnten dann ebenfalls auf ein passendes Format gebracht werden (wenn keine Verzerrungen gewünscht sind, könnte man einfach "Leerpixel" in der Hintergrundfarbe als "Rahmen" hinzufügen. Das Handling für diese Bilder würde sich dann sehr vereinfachen: Weil alle Bilder als Zielgröße identisch groß sind, kann diese Zielgröße einfach als width und height im <img> angegeben werden.

Alternativ kann ein Serverskript feststellen, wie groß das Bild tatsächlich ist, und diesen Wert nur bis zu einem Maximum unverändert durchlassen, darüber aber dann nur den Maximalwert ausgeben. Wenn aber der Browser das Verkleinern vornehmen soll, sieht das Ergebnis nicht wirklich toll aus, und außerdem ändert das ja nichts am Traffic.

- Sven Rautenberg

[depp]

Weder noch, würde ich meinen.

da die bilder nicht bei mir geuploadet werden, sondern von anderen servern aus genutzt werden, ist keine der beiden ideen realisierbar, zumal das ermitteln von der größe eines großen bildes durchaus lang dauern kann, da es der server erst mal downloaden muss.
gibts keine lösungen für meinen ansatz?

danke

[MudGuard]

Hi,

da die bilder nicht bei mir geuploadet werden, sondern von anderen servern aus genutzt werden,

Liegen die nötigen Berechtigungen vor, daß Du fremde Bilder als Deine Inhalte anzeigen darfst?

ist keine der beiden ideen realisierbar, zumal das ermitteln von der größe eines großen bildes durchaus lang dauern kann, da es der server erst mal downloaden muss.

Für Browser könnte man mit der CSS-Eigenschaft max-width was probieren.

Für den IE ggf. ne Javascript-Lösung (da kenn ich mich aber nicht gut genug aus, meine aber, schon mal gelesen zu haben, daß man da an die Größe rankommt - und dann könnte man eben die width-Eigenschaft setzen, falls das Bild zu breit ist)

cu,
Andreas

[Fritz]

Hallo,

Weder noch, würde ich meinen.
da die bilder nicht bei mir geuploadet werden, sondern von anderen servern aus genutzt werden, ist keine der beiden ideen realisierbar,

auch dafür gibt's eine Lösung:
http://phpthumb.sourceforge.net/

Gruß Fritz

[Jeena Paradies]

Hallo,

auf meiner seite werden bilder von usern angezeigt.
dabei sind leider nicht alle in einem geeingneten format.
dies stellt insbesondere ein problem dar, wenn sie extrem groß sind und dadurch die darstellung einer tabelle o.ä. verpfuschen. diese sollten daher etwas begrenzt werden.
zu kleine bilder dürfen jedoch nicht verzerrt werden, sondern sollen ihre größe beibehalten.

Genau das habe ich bei einem der letzten Projekte auch verwirklicht, und vor drei Tagen wollte ich zwar einen Weblogeintrag darüber schreiben, bin aber noch nicht dazu gekommen.

Also ich habe folgenden Ansatz, der auf jeden Fall in den MOS (Mozilla Opera Safari) Browsern ohne JS funktioniert. Für den IE gibt es ja diesen IE7 von Dean Edwards http://dean.edwards.name/IE7/, welcher das für dich übernehmen kann, ohne dass du dir viele Gedanken zur JS programmierung machen musst.

#content img { max-width: 95%; }

Wobei #content die Tabellenzeile, bzw. der Bereich ist, wo die Bilder drinn sind. Alle Bilder innerhalb des content bekommen somit eine Maximale Breite von 95% des zur verfügung stehenden Platzes. Man sollte das nicht auf alle Bilder der Seite anwenden, da es sonst zu unverhersehbaren Ergebnissen kommen kann, die zum Teil ziemlich bescheiden aussehen.

Der zur Verfügung stehende Platz ist die Breite des Elternelements. Sie werden somit nie über dessen Breite gehen, und somit auch nie das Design zerstören. Bilder die kleiner sind als die Maximalbreite werden einfach in Orginalgröße angezeigt. Wichtig ist es dabei keine Höhe anzugeben, da die Bilder sonst gestaucht werden.

Ich finde das eine gute Lösung, da leute, die viel Platz haben, auch große Bilder bekommen sollten, ohne dass man schon beim hochladen die Breite begrenzt. Leute mit einem kleinen Bildschirm müssen zwar trotzdem das große Bild runterladen, um es dann vom Browser verkleinern zu lassen, aber ich sehe keine (vergleichsweise einfache) Alternative alle Browserfensterbreiten gleichermaßen zu bedienen.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

Sorry ich bin ein bischen blöd, ich hab das doch schon veröffentlicht: http://jeenaparadies.de/weblog/2004/september/ausbrechende-bilder/

Grüße
Jeena Paradies

[depp]

hallo
erstmal danke...
im mozilla siehts nun schon besser aus.
aber leider kann ich keinen dazu zwingen, umzusteigen!

daher komm ich wohl nicht um die javascript lösung rum.
weiss irgendwer ne seite, die diese realisiert hat oder ein tutorial hierfür?

die alternative wär halt noch ne css eigenschaft, dass bilder nicht verzerrt werden, z.b. stretch:0;

danke

[Jeena Paradies]

Hallo,

hallo
erstmal danke...
im mozilla siehts nun schon besser aus.

Mozilla, Opera, Safari (Konqueror) machen das alle mit.

aber leider kann ich keinen dazu zwingen, umzusteigen!

Must du ja auch nicht.

daher komm ich wohl nicht um die javascript lösung rum.
weiss irgendwer ne seite, die diese realisiert hat oder ein tutorial hierfür?

Hast du dir den IE7 von Dean Edwards angeschaut? Das ist genau was du brauchst, der emuliert mittels JavaScript max-width für den IE. Oder willst du doch unbedingt selbst etwas programmieren?

die alternative wär halt noch ne css eigenschaft, dass bilder nicht verzerrt werden, z.b. stretch:0;

noch nie gehört. Wazu denn das eigentlich?

Grüße
Jeena Paradies