Christian: Bilder in max Grösse ausgeben ohne vergrössern

Wie kann man ein *.jpg anzeigen lassen und für dieses eine max grösse festlegen.
Mit width="600" lege ich fest das das Bild 600 Pixel breit sein soll, wenn das Bild grösser als 600 Pixel ist dann funktioniert das ja auch, wenn es aber kleiner ist dann wird es ja vergrössert und genau das will ich nicht.
Wie kann ich das unterbinden, also wie schon im Titel gesagt keine feste Breite, sondern eine maximale Breite erreichen.

  1. Dies ist in Html nicht sicher machbar, aber könntest mit Javascript oder Php die Breite des Bildes abfragen.

    1. lass doch einfach mal die größen angabe weg..
      lg
      matthias

      1. Das ist mein Problem:

        Ich lade per Upload Script ein Bild auf den Server, aus diesem wird gleich ein Thumbnail in einem unterordner erstellt.

        Nun greife ich per <img src="pictures/bild.jpg" width="600" alt="Testbild"> darauf zu, wobei der Pfad durch eine Variable gesetzt wird.

        Ich kann leide vom user nicht verlangen vorher seine Bilder auf eine bestimmte grösse zu ändern. Normal ist auch alles so super am funktionieren, jedoch wenn der User mal ein Bild mit 100x100 Pixel auf den Server lädt, dann wird es sehr hässlich.

        Da möchte ich das das Bild dann auch nur mit 100x100 im Orginal angezeigt wird. Das kommt selten vor, meist sind die Bilder über 600 Pixel, aber es kommt halt vor.

        Gibt es da den keine Lösung?

        1. Ja gut, nur bin ich noch kein PHP freak. Ich habe mein Upload und das automatische erzeugen von Thumbnails in PHP aus mehren Scripten und eigenen Ideen zusammen gebaut.
          Nur wenn ich die Bildergröße Abfrage, was bringt mir das dann.

          Wie soll ihm den sagen wenn Bild kleiner als 600 Pixel dann lasse den Wert width="600" weg und wenn grösser dann benutze ihn.

          1. Hi,

            Wie soll ihm den sagen wenn Bild kleiner als 600 Pixel dann lasse den Wert width="600" weg und wenn grösser dann benutze ihn.

            brauchst Du doch garnicht. Lasse grundsätzlich die Weitenangabe weg und erweitere die Funktion der Thumbnailerstellung dahingehend, daß zu große Bilder auf 600px verkleinert werden.

            freundliche Grüße
            Ingo

            1. Hi Ingo,

              brauchst Du doch garnicht. Lasse grundsätzlich die Weitenangabe weg und erweitere die Funktion der Thumbnailerstellung dahingehend, daß zu große Bilder auf 600px verkleinert werden.

              Ich glaube, sein Problem so verstanden zu habe, dass er die Bilder durch die width-Angabe zu skalieren versucht. Sein Problem scheinen mir dabei nicht die zu großen sondern sie zu kleinen Bilder zu sein, weil ein 100x100 Bild auf 600xX skaliert extrem pixxelig aussieht.

              Der ganze Ansatz scheint mir auch zweifelhaft zu sein, und ich würde Dir Recht geben, dass er die Probleme beim Upload lösen sollte, nicht über die width-Angabe.

              Da er anscheinend eh eine PHP-Routine benutzt, um die Thumbnails zu erzeugen, dürfte es auch möglich sein, zu diesem Zeitpunkt auch die großen Bilder zu skalieren und eine if-Abfrage einzubauen, die eine Minimalgröße abfragt, ab der skaliert wird.

              Da ich keinen Schimmer von PHP und seinen Bildbearbeitungsmöglichkeiten habe, müssten die PHP-Profis mal was dazu sagen, ob man das so lösen kann oder nicht.

              Viele Grüße
              Mathias Bigge

              1. Hi,

                brauchst Du doch garnicht. Lasse grundsätzlich die Weitenangabe weg und erweitere die Funktion der Thumbnailerstellung dahingehend, daß zu große Bilder auf 600px verkleinert werden.
                Ich glaube, sein Problem so verstanden zu habe, dass er die Bilder durch die width-Angabe zu skalieren versucht. Sein Problem scheinen mir dabei nicht die zu großen sondern sie zu kleinen Bilder zu sein, weil ein 100x100 Bild auf 600xX skaliert extrem pixxelig aussieht.

                ich glaube nicht, daß es so ist. Im Einleitungsposting heißt es:
                "keine feste Breite, sondern eine maximale Breite"
                und später dann:
                "das Bild dann auch nur mit 100x100 im Orginal angezeigt wird. Das kommt selten vor, meist sind die Bilder über 600 Pixel"

                Demnach sah die bisherige "Lösung" so aus, daß allen Bildern eine Breite von 600px zugewiesen wurden - vermutlich, damit die umgebende Box nicht gesprengt wird - und die meisten Bilder clientseitig verkleinert wurden, einige wenige aber vergrößert. Beides ist nicht optimal (auch Bilder clientseitig zu verkleinern ergibt schlechtere Ergebnisse und unötige Ladezeiten), weshalb in der Tat eine serverseitige Slalierung der einzig sinnvolle Weg ist.

                freundliche Grüße
                Ingo

                1. Hi Ingo,

                  Demnach sah die bisherige "Lösung" so aus, daß allen Bildern eine Breite von 600px zugewiesen wurden - vermutlich, damit die umgebende Box nicht gesprengt wird - und die meisten Bilder clientseitig verkleinert wurden, einige wenige aber vergrößert. Beides ist nicht optimal (auch Bilder clientseitig zu verkleinern ergibt schlechtere Ergebnisse und unötige Ladezeiten), weshalb in der Tat eine serverseitige Slalierung der einzig sinnvolle Weg ist.

                  Da sind wir uns einig. Verstanden habe ich es allerdings so: Die großen will er durch den Browser verkleinern, nur verhindern, dass durch diese width-Angabe die Kleinen noch oben skaliert werden. Aber vielleicht bin ich auch wieder Mal verpeilt?

                  Viele Grüße
                  Mathias Bigge

                  1. Hi,

                    Da sind wir uns einig. Verstanden habe ich es allerdings so: Die großen will er durch den Browser verkleinern, nur verhindern, dass durch diese width-Angabe die Kleinen noch oben skaliert werden. Aber vielleicht bin ich auch wieder Mal verpeilt?

                    nö, das war ganz genau sein Vorgehen und auch sein Problem. Ich glaube, daß ich Deine Anmerkung nicht ganz richtig aufgefaßt hatte ;-)
                    Lag aber wohl daran, daß Du im Grunde exakt das vorgeschlagen hattest, das ich auch schon - mit anderen Worten - geschrieben hatte. Naja, man sieht, daß wir uns einig sind...

                    freundliche Grüße
                    Ingo

        2. Hallo Christian,

          dann verkleinere doch mittels PHP nach dem Upload die Bilder, die breiter als 600px sind. Bei der Ausgabe lässt du im img-Tag entweder die Breite weg oder ermittelst sie günstigerweise auch wieder über PHP.

          Gruß Gonzman

  2. Hi,

    ich verstehe Dein Problem nicht. Wenn Du die Bilder serverseitig auswählst, kannst Du doch hier auch die Bildgröße ermitteln und entsprechend angeben. Und wenn Du die Bilder statisch (manuell) einbindest, dann kennst Du doch die Größen und kannst sie wie gewünscht angeben.
    Aber eine ganz andere Lösung wäre vermutlich noch viel besser: verkleinere alle zu großen Bilder _vorher_ (entweder direkt mit dem Bildbearbeitungsprogramm Deiner Wahl oder einem Servertool); dann kannst Du stets die tatsächliche Bildgröße angeben oder die Dimensionen dem Browser überlassen.

    freundliche Grüße
    Ingo

  3. Hallo Christian,

    Wie kann man ein *.jpg anzeigen lassen und für dieses eine max grösse festlegen.

    Mit reinen HTML/CSS-Mitteln ist mir da kein Weg bekannt. Du könntest jedoch versuchen mittels Javascript das Bild auf dessen Breite zu prüfen und bei Bedarf ein neues Bild mit einer auf die maximale Breite skalierten Grösse zu erstellen. Vielleicht als Ansatz:

    function writeimg(url,maxw){
     var img = new Image();
     img.src=url;
     var scalw = img.width;
     var scalh = img.height;
     if(scalw > maxw){
     scalh = scalh*maxw/scalw;
     scalw = maxw;
     }
     document.write('<img src="'+url+'" width="'+scalw+'" height="'+scalh+'">');
    }

    Gruß Gonzman