Bildgröße ändern - Seitenverhältnisse beibehalten!

[Timm3r]

Hallo zusammen,

ich möchte auf meiner Homepage, bei der ich mit Frames arbeite, Bilder einbauen. Hier sollen immer 2 nebeneinander sein und der Rest untereinander. Allerdings muss ich hier natürlich die Bilder skalieren.

Mit Pixeln arbeiten geht nicht, weil jeder Bildschirm eine andere Größe hat. Mit Prozent allerdings auch nicht, da jeder Bildschirm andere Seitenverhätnisse hat. Was kann ich da machen?

Grüße,

Timmer.

 

[threadi]

Im Idealfall solltest Du dafür ein serverseitiges Script verwenden, welches die Bilder auf Höhe und/oder Breite zuschneidet. Dafür gibt es auch zahlreiche Vorlagen, z.B. für PHP. Die Generierung muss dann jedoch Pixelgenau erfolgen, prozentual geht es nicht.

Alternativ könnte man auch CSS dafür verwenden, muss jedoch dann damit rechnen, dass die Seite länger lädt wenn z.B. ein 2000x2000 großes Bild komplett vom Besucher geladen werden und von dessen Browser dann runtergerechnet werden muss. Du könntest per CSS auch prozentuale Werte verwenden, müsstest dann aber ggfs. auf dein Frames verzichten da dieses eine prozentuale Berechnung nur erschwert und ungenau werden lässt.

Abgesehen davon würde ich dir ohnehin raten auf das Frameset zu verzichten. Das macht die Arbeit nur schwerer als es ist und sieht hässlich aus.

 

[NetAktiv]

Ich habe es wesentlich einfacher gemacht. Ich habe ein div mit fester Höhe/Breite und darin ein img-Tag. Alles ist in einer PHP-Seite, die ich mit der Bild-URL und einem Parameter Restrict aufrufe. Bei Restrict=height wird im img-Tag die Höhe gesetzt, bei restrict=width die Breite und sonst keine Angaben. Damit spare ich mir, die Bilder erst mal mit PHP auf den Server zu holen und deren Größe zu analysieren, der Browser macht das schon für meine Zwecke ausreichend. Die Seite ist noch nicht öffentlich, aber vorab mal der Link:

http://muehlespieler.de/x_sonstiges/index.php?page=bretter_mehr Schau dir beispielsweise mal USA-Mühle bei mir an und dann das Bild

http://hometownusastores.com/images/channelcraft/GBNM.jpg

direkt in einem Browserfenster. Nachteil ist halt, dass bei großen Bildern der Browser alles laden muss und ich die Bildgröße kennen muss, um den Restrict-Parameter entsprechend anzupassen