Bild dynamisch an Browser anpassen

[Novas]

Hi.
Ich suche ein Verfahren mit dem ich ein Bild, das auf einer Website angezeigt wird an die Größe des Browsers anpassen kann. Wenn das Bild größer ist als die momentane Größe des Browsers, dann soll es nach unten skaliert werden. Wenn das Bild kleiner ist, dann sollte es einfach zentriert in Originalgröße dargstellt werden.
Bei einem Klick darauf solle das Bild in Originalgröße angezeigt werden.

Weiß jemand wie ich das bewerkstelligen kann? Oder weiß jemand ein fertiges Script, das ich einfach einbinden kann?

Bin für jede Hilfe dankbar!

 

[theHacker]

Die "Größe des Browsers" ist nur clientseitig bekannt, d.h. du musst mit JavaScript rangehen, was natürlich - wie alles auf der Clientseite - deaktiviert werden kann.
Infos für Nutzung vom onresize-Eventhandler gibts hier:
https://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm

Eine JavaScript-freie Alternative wäre, die Bildgröße festvorzugeben.
Ich habe es auf meiner Seite so gelöst: Beispiel-Bildhttps://www.thehacker.ws/Stuff/Fotogalerien/

Da der Client das Bild sowieso immer ganz laden muss, ist dieses JS-Rumgemache imho für die Katz. Außerdem bieten die Browser doch meist eh eine automatische Skalierung auf die Größe des sichtbaren Bereichs an, dass das ganze Bild komplett drauf is. Also warum das Rad neu erfinden ?

 

[Thomas]

@theHacker, man könnte aber, wenn bekannt, serverseitig die bilder entsprechend, z.b. mit php, runterrechnen lassen. das kann traffic sparen.

soetwas in der art hatte ich für mein photocase geplant. z.b. für panoramen, damit diese quasi auf die maximale breite runtergerechnet werden und der betrachter alles "auf einen blick" hat. ist aber, wie du schon sagtest, eine js-sache und so hab ichs dann erstmal sein lassen...

vielleicht hilft es dir, mein gedankengang dazu:

- user kommt auf deine seite
- da er das erste mal kommt (könnte man z.b. über eine session regeln oder die ip-daten des counters zu nutzen) wird er auf eine "erkennungsseite" geleitet
- auf der erkennungsseite ermittelt ein js die auflösung und leitet an die ursprungsadresse mit einem zusatz im link a la domain/index.php?...width=x&height=y
- sind width & height entsprechend gesetzt erfolgt eine runterrechnung der bilder, wenn nicht, dann einfach standard

für user mit deaktivertem js brauchst du dann auf der erkennungsseite eine alternative, z.b. eine manuelle auswahl an standard-auflösungen

 

[theHacker]

@Thomas:
Jupp, das is eine gute Idee. Aber diese Methode bietet dir dann auch keine stufenlose Skalierung (und ich hatte so den Eindruck, dass der Threadersteller genau das im Kopf hatte). Und du hast das Problem, dass du pro vorbereiteter Auflösung x-fach Speicherplatz brauchst. Ein on-the-fly-Runterrechnen kostet viel Traffic, weil das Einlesen des Bildes afaik auch noch Traffic kostet, du also doppelten Traffic zahlst.

Zumindest kommst du mit deiner Variante schon näher dran, wie ich mit meinem Post

 

[tleilax]

Ein on-the-fly-Runterrechnen kostet viel Traffic, weil das Einlesen des Bildes afaik auch noch Traffic kostet, du also doppelten Traffic zahlst.

Wenn die Bilder lokal liegen (wovon ich in beiden Fällen ausgehen würde), ist das doch interner Traffic und den berechnen AFAIK die wenigsten Anbieter.

 

[theHacker]

Wenn die Bilder lokal liegen (wovon ich in beiden Fällen ausgehen würde), ist das doch interner Traffic und den berechnen AFAIK die wenigsten Anbieter.

So ? Ich hab das mal wo gelesen und mir nix weiter dabei gedacht und es als gegeben hingenommen, dass die Hoster da auch noch Kohle mit machen.
Ich werd die Frage gleich mal meinem Support mailen

 

[Thomas]

also ich bezahle bei meinem hoster nur die daten die durch die leitung das rechenzentrum verlassen. das runterrechnen meiner bilder kostet mich nichts. höchstens dem user wartezeit.

thehacker, klar kann ich nicht stufenlos skalieren, das hat die digitale bildverarbeitung so ansich, es geht nur "pixelweise", ansonsten ist es doch egal, auf welche werte ich mein bild runterrechnen lasse.
und dazu liegt das bild auch nur einmal auf den server nicht mehrmals.

mit den vorbereiteten auflösung waren ja auch nur links gemeint die man anklicken kann, wenn die automatische erkennung dank deaktiviertem js nicht geht, a la

domain/index.php?...width=800&height=600
domain/index.php?...width=1024&height=768
domain/index.php?...width=1280&height=1024
...

den rest macht dann wieder das script

 

[Novas]

hm ahjo...

danke, jungs

dann werd ich ma weitersehn.
merci

 

[MasterCoder]

Und was ist wenn der User den Browser nicht maximiert hat? Dann ist das Bild auch wieder zu groß. Außerdem ist in jedem Browser die Ansichtfläche anders. Die einzige möglichkeit ist Javascript, aber nicht jeder hat das aktiviert.

 

[Thomas]

mastercoder, haben wir doch auch schon gesagt...

bzgl. browser nicht maximiert: hab zwar schon ewig nichts mehr mit js gemacht, aber ich bin mir relativ sicher, da gabs eine "funktion" a la innerWidth usw. um die tatsächliche anzeigefläche zu ermitteln.

wie bereits gesagt, würde ich die fensterbreiten in der url übergeben - das js kann ja auch bei jedem seitenaufruf die aktuelle größe ermitteln und diese an die links auf die nächsten bilder anhängen. sollte der user also die browsergröße ändern dauert es zwei klicks bis die größe wieder stimmt. über eventhandler könnte man es vielleicht realisieren, dass es schon direkt beim nächsten bild wieder stimmt. aber darauf würde ich einfach mal verzichten, da ich einfach davon ausgehe, wenn sich jemand durch meine galerie klickt, dass er dann nicht ständig die browsergröße ändert.

und die user die js deaktivert haben, die haben eben ganz einfach mal pech. sie wählen eine vorgegebene standardgröße und dann ist gut. wenn sie ihren browser nicht maximiert haben, können sie es selbst machen, wenn sie nicht wollen, dann können sie eben scrollen, und wer nicht scrollen will, sieht eben nur die hälfte

evtl. wäre ja flash noch eine alternative, aber da kommen jetzt sicher gleich wieder klugscheißer mit: aber nicht jeder hat das flashplugin installiert