img-Tag

[Arndtinho]

Hallo,

über ein Formular können User Bilder uploaden. Die Bilder werden auf eine maximale Breite von 250px skaliert. Wenn ich nun die Bilder darstellen will, passiert folgendes:

Mit

<img src="bild.jpg" border="0" width="100%">

wird bis zu einer Displaybreite von 250px alles korrekt dargestellt.
Ist das Display nun größer, zum Beispiel 320px, wird mit obigen Aufruf auch das Bild auf 320px gestreckt. Das sollte natürlich nicht so sein.

Wie kann man so etwas verhindern?


Gruß,
Arndtinho

 

[Maik]

Hi,

du könntest mit der max-width-Eigenschaft eine Maximalbreite für die Bilder bestimmen.

 

[Arndtinho]

Danke für den Tipp.
Hab es getestet und das klappt zumindest.
Hat aber den Nachteil, das Bilder, die kleiner sind trotz dessen auf die max. Breite skaliert werden. Das sollte zwar ncht vorkommen, aber wenn der User ein kleineres Bild (Originalbreite < 250px) uploaded, tritt der oben genannte Fall ein.

 

[Dennis Wronka]

Wenn doch alle hochgeladenen Bilder die breiter als 250 Pixel sind verkleinert werden, sollte es dann nicht reichen jegliche Breitenattribute beim img-Tag wegzulassen und somit das Bild einfach in der Groesse anzuzeigen in der es gespeichert wurde?

 

[Arndtinho]

Da erscheinen aber in einem Display, welches kleiner als 250px breit ist, Scrollbalben. Um dies zu vermeiden setze ich "width="100%".
Mit dem Tipp von michaelsinterface wird dann die Bilder auch korrekt dargestellt, wenn das Display größßer als 250px breit ist.
Nun kann es ja aber doch vorkommen, dass ein User ein Bild uploaded, bei dem die Originalbreite kleiner als 250px ist. In diesem Fall wird das Bild ja nicht kleiner gemacht, sonder bei der Originalgröße belassen.
Das Problem welches jetzt aber auftritt, das aufgrund max-width="250px" das Bild auf die Breite von 250px gestreckt wird. Das soll aber nicht so sein. Es soll in dem Fall die Originalgröße beibehalten.

 

[Maik]

Was meinst du eigentlich mit "Display" und warum schwankt seine Breite? Mal sind es 250, dann 320 und dann wieder weniger als 250 Pixel

Vielleicht solltest du grundsätzlich auf die Skalierung der Bilder verzichten, um den Fall auszuschliessen, dass ein User ein Bild hochlädt, das schmäler als 250px ist, und es dann unerwünschter Weise gestreckt wird.

 

[Arndtinho]

Weil ältere Handies eine Displaybreite von ca. 240px haben.
Die neueren Handies jedoch eine von 320px.

Alle Bilder die geuploadet werden, sollen eine max. Breite von 250px haben.

Um diese Bilder auf den kleineren Displays darzustellen, nutze ich width="100%".
Auf den neuen Displays werden sie, ohne max-width="250px" auf die Displaybreite gestreckt. Was zu unschönen Bildern führt.

Nun kann es jedoch auch vorkommen, dass ein User ein Bild uploadet was nur eine Breite von 200px hat. Nun wird es für die kleineren Displays auf 240px und für die neueren Displays auf 250px gestreckt. Und das will ich vermeiden.

 

[Maik]

Okay, dann wäre geklärt, von welchem Display du sprichst und weshalb seine Breite variiert.

Wenn du vermeiden willst, dass zu kleine Bilder auf den größeren Display-Auflösungen "unerwünscht" gestreckt werden, dann solltest du, wie von Dennis und mir schon empfohlen, auf die Skalierung (width="100%") verzichten, und die Bilder in ihrer Originalgröße darstellen lassen.

 

[Arndtinho]

Ok.
Dann werd ich das erstmal so wie Ihr vorgeschlagen habt übernehmen.