HTML Code für automatische Größenanpassung von Bilder?

  • Hallo,
    ich bin zur Zeit dabei meine Ebay-Auktionen etwas besser zu gestalten indem ich die Bilder auf nen externen Server auslagere und entsprechend verlinke :).

    Ich habe mich bei der Auflösung für einen sehr gute Auflösung von 800 x xxxx Pixeln entschlossen und benutze zum Velinken zur Zeit folgenden HTML Code:
    <p align=center></p>

    Im Prinzip kalppt das schon ganz gut (die Bilder werden z.B. auf meinem Monitor perfekt dargestellt), nur ergiebt sich dabei das Problem, dass leider wenn jemand einen Monitor mit einer wesentlich geringeren Auflösung hat gar nichts mehr klappt :( (die Bilder werden riesig dargestellt und als Folge daraus muss man nicht nur nach oben und unten Scrollen, sondern auch noch nach links und rechts, was alles natürlich sehr unübersichtlich macht .).


    Nun will ich aber nicht wegen den paar Usern, welche eben noch einen etwas älteren Bildschirm haben gleich generell die Auflösung herabsetzen sondern würde viel lieber bei der hohen Auflösung bleiben und meinen HTML Code einfach so ergänzen, dass die Breite des Bildes automatisch entsprechend der Bildschirmauflösung angepasst wird, dass es in der korrekten Größe dargestellt wird (ohne "links-rechts-Scrollbalken und mit so ca 1-2 cm Abstand von linken und rechten Rand) - hat jemand da ne Idee wie das funktionieren könnte ?

  • du könntset ausrechenen wieviel platzt sie auf deinem bilschirm einehmen und dann mit dem eintrag

    Code
    style="width:prozent%;"

    im img tag
    diese prozentzahl angeben dann würden sie für höhere auflösungen vergrößert und für kleineren verkleinert nur im ersten fall würden sie dann warscheinlich ziemlich verpixeln .


    EDIT :vorischt im code war mir ein , dazwischn gerutscht jetzt ists richtig

  • pindakaas: Klingt ganz interresant - nur blick ich jetzt net ganz durch wo der Code jetzt hin soll :? .

    Könntest du mal vielleicht meine Code hernehmen (<p align=center></p>) und den entsprechend ergänzen :roll: ? Vielleicht blick ich dann ja etwas besser durch :) .

  • Ah danke webbie! Jetzt kann ichs nachvollziehen :D .

    Ich werds dann gleich mal ausprobieren - nur noch ne Kleinigkeit ist mit unklar: Pindakaas meinte ja, dass dann das Bild bei einer höheren Auflösung "verpixeln" würde - was mein ihr ist so das maximum an Aulösung was ein "normaler" User haben könnte - welche Auflösung macht also Sinn um diesen Effekt zu vermeiden :roll: ?

  • Der Bildschirm hat eine Auflösung von 96 dpi. Eine andere Bildqualität solltest du Dir schenken, es macht kaum Sinn, da nicht mehr dargestellt wird. Nimmst Du z.B. 150 dpi, so wird das Bild entweder größer oder es wird skaliert. Wandle es direkt in 96 dpi um, lege die Größe auf 800 Pixel breit fest und es wird auch vom Speicherplatz her noch verträgliche Ladezeitenaufweisen. ? Blöder Satz, aber Du verstehst schon, was ich meine !
    Gib stattdessen eine feste Breite vor, in welcher das Bild maximal dargestellt wird, also zum Beispiel ein Frameset oder einen Div-Container mit einer Größe von 800x600 Pixeln zentriert auf dem Bildschirm. Dann sehen auch Benutzer mit einer höheren Auflösung das Bild noch vernünftig und unskaliert.
    Gruß
    webbie

    Edit:
    Das war jetzt teilweise quatsch. Hm, es geht ja nicht, weil Du ja möchtest, dass man auch mit geringerer Auflösung gucken können soll ohne scrollen zu müssen, also die Angaben relativ bleiben müssten. Die feste Vorgabe macht also keinen Sinn.

  • Naja mein eigentlicher Gedanke den ich jetzt im Moment hab ist: Ich mache meine Bilder z.B. in einer Breite von 2000 Pixeln und sorge so dafür, dass sie auf sehr guten Bildschirmen mit hoher Auflösung nicht großartig vergrößert werden müssen, und auf schlechteren Bildschirmen werden sie ja dann sowieso einfach entsprechend verkleinert :) .

    Aber die Idee bei einer geringeren Auflösung zu bleiben, das Atribut " style="width: " miteinzubauen, um dem Scrollen bei einer relatiev geringen Auflösung entgegen zu wirken, aber geleichzeitig eine feste Maximalgröße anzugeben um den "Verpixlungseffekt" auf größeren Moitoren entgegenzuwirken ist natürlich auch genial :D.

    Nur blick ich da leider wieder mal net durch - ich sollte vielleicht noch dazu erwähnen, dass ich (noch) ein absoluter Newbie in dem Gebiet bin und leider keinerlei Ahnung davon hab, was z.B. ein Frameset oder einen Div-Container ist :(.

  • Lass es mit den 2000 Pixeln, Du machst Dir damit keine Freunde bei den durchaus noch vielen Modem- und ISDN-Usern. Bleib nur bei einer Auflösung von 96 dpi und mache die Bilder exakt 800x600 Pixel groß.

    Setze sie dann in ein Frameset wie diesem hier:
    http://webbies.space4free.net/bildanpassung.html

    Mach am Besten auch folgendes: style="width:87%; height=87%"
    Damit auch die senkrechte Dimension noch stimmt.

    Gruß
    webbie

  • Also das wird mit alles zu kompliziert, kann man denn nicht vielleicht einfach die erste Lösung weiterverfolgen - also

    Code
    <p align=center>[img]image.jpg[/img]</p>


    hernehmen und einfach zusätzlich noch ne maximalgröße irgendwie mit ergänzen, um eine Vergrößerung zu vermeiden :roll: ?


    P.S. Eine feste auflösung von z.B. 800 x 600 Pixeln ist übrigens nicht möglich, da ich ja immer wieder völlig verschiedene Sachen verkaufe und ich die Bilder entsprechend zuschneiden muss ( z.B. hatte ich neulich eine lebensgroße Figur, die ja im Original 50 cm Beit, aber 140 cm hoch ist und dann gibt es ja auch wiederrum Sachen die sehr sehr breit sind, aber nicht besonders hoch...) Somit kann ich ich diese Sachen nicht in einen "vorgefetigten Kasten" reinpressen, sondern kann höchstens beim Verkleinern bestimmen, das Bild soll z.B. 800 Pixel breit sein - aber die Höhe ergibt sich dann eben von selbst und ist immer anders :?.

  • Finger weg, die Bilder mit HTML in der Anzeige zu verkleinern. Das sieht nicht nur in fast allen Fällen grauenvoll aus, insbesondere, wenn im Original Feine Linien vorhanden sind, aber auch sonst. Der Algorythmus der Browser zum Verkleinern ist einfach nicht das Wahre. Lieber vorher physikalisch verkleinern. Das kann man zur Not auch in einer Batch-verarbeitung mit Irfanview, aber um himmels Willen nicht im Browser.

    Mal so ganz nebenbei verschwendet man unnötig Bandbreite und Traffic.

  • Beatz: Also so ganz kann ich deine Aussage nicht nachvolluiehen - ich arbeite schon sehr lange mit Firefox und hatt damit noch nie Probleme gehabt!

    Im übrigen geht es ja auch nicht wirklich darum die Bilder prinzipell immer über HTML zu verkleiner oder zu vergrößern - alle die einen Monitor mit ausreichender Auflösung haben sollten die Bilder weiterhin in der Originalauflösung sehen, keine Pixel größer oder kleiner - nur bei älteren Modellen wäre eben eine Verkleinerung nötig, damit man nicht immer nach links und rechts Scrollen muss - was ja auch absolut schrecklich ist!