PHP Bilderskalierung

[Ju1ius]

(PHP mag der falsche Präfix sein)
Es geht um Bildskalierung auf einer Website, die Bilder sollen so wie auf dem Screenshot zu sehen variabel (hoch/querformat) angeordnet sein dabei sollen diese fortlaufend sein sprich die Seite soll klassisch scroll-bar sein. Nun zum eigentlichen Problem, die Bilder liegen in Auflösung X vor und die gesamte Seite in den einzelnen Elementen (graue flächen) sollen je nach Browser-Fenstergröße und Auflösung Proportional skalieren, dabei sollen die Bilder in ihrer Anordnung unverändert bleiben. Ist die möglich, und wenn ja wie ließe sich dieses machen? Ich bin für jeden Tip dankbar!

 

[SymA]

http://masonry.desandro.com/
Etwa sowas?

 

[HominiLupus]

Mit PHP ginge dieses via imagemagick, mit Python der PIL "Python Imaging Library", etc. Die Bildschirmauflösung des Clients kann man via Javascript abfragen, die Größe des Browserfensters bzw. Viewport aber afaik nicht.

 

[Ju1ius]

ja in etwa, wobei diese "Animation" vermutlich/hoffentlich optional ist?

 

[Madman1209]

Hi,

selbstverständlich kann man die Größe des Browserfensters / Viewports mit JS abfragen.

Sollen die Bilder auch skalieren, wenn ich den Browser manuell verkleinere, nachdem die Seite geladen wurde?

VG,
Mad

 

[Ju1ius]

ja genau, sprich ändert jemand das Browserfenster sollen die Bilder onthefly skalieren, ich denke was SymA da verlinkt hat ist, zumindest für mich am einfachsten und besten?

 

[SymA]

Sowas würde ich mit einer Bibliothek machen und dann evtl. mit Responsive Webdesign kombinieren, dann kommt was schönes bei raus.

 

[Cool Master]

Genau wie SymA sagt sollte man es machen. So hat man effektiv nur 3 Bilder:

Smartphone unter z.B. 800 x n
Tablet über 1024
Desktop über 1280

Tablet und Desktop könnte man sogar noch gut zusammen fassen so hätte man nur zwei Bilder.

 

[[ChAoZ]]

Die Bilder sollen also einfach mit der Auflösung runterskalieren?
Desktop -> Mobile?

CSS Lösung?

img {
	max-width: 100%;
	height: auto;
}

http://m.onblog.at/responsive-webdesign-3-bilder-automatisch-skalieren
Oder habe ich was Falsch verstanden?

 

[Madman1209]

Hi,

SymA hat es perfekt formuliert: so und nicht anders! Alleine mit PHP unmöglich.

VG,
Mad

 

[Ju1ius]

alles richtig, genau so etwas meinte ich! Danke Allen!

 

[Cool Master]

[ChAoZ]'s seine Möglichkeit geht auch noch. Hier muss man aber sehen wie es sich mit Bildern verhält die schon recht klein sind. Die werden auf Smartphones oder Tablets gerne mal sehr klein.

 

[Daaron]

Die Version von Chaoz reicht alleine nicht. Hier braucht es noch etwas Width-Magie.
Nehmen wir das Beispiel-Bild:
- Zeile 1: 2x 50%
- Zeile 2: 25%, 50%, 25%

Das muss man vorher definieren, sonst klappt es hinten und vorne nicht.

 

[Ju1ius]

mir raucht der kopf...ich werde es wohl anderen überlassen müssen mir das zu coden.

 

[Teisi]

sers,

meine lösung js...

den kontainer in dem sich die bilder befinden eine breite in prozent, den bildern ne breite in prozent geben...

dann mit js die browser breite abfragen, wenn diese dann einen gewissen punkt unterschritten hat, animierst du die breite der bilder, verschieben tun sie sich automatisch... oder du animierst die breite und die position... bleibt dir überlassen...

ups, sollen ja an ihrer position bleiben, hab ich überlesenn...
egal, dann trifft nur die möglichkeit zu den wrapper und den bildern nen % wert geben...
wenn sie dann doch, für smartphones z.b. zu klein werden, musst du sie halt doch vergrößern und die position ändern, das ginge mit mediaqueries

wobei dabei das erste wäre die nav weg zu schalten und n mobiles menü einblendet, dann hast du wieder etwas fläche in der breite gewonnen... das würde das umschalten der positionierung der bilder hinauszögern...

grüße

 

[Cool Master]

Warum muss man das immer mit der JS-Keule angehen :X Die Antwort gab es schon:

CSS bzw. Responsive Webdesign

Gutes bsp. dafür:

http://dev.opigno.org/

 

[Daaron]

dann mit js die browser breite abfragen, wenn diese dann einen gewissen punkt unterschritten hat, animierst du die breite der bilder, verschieben tun sie sich automatisch... oder du animierst die breite und die position... bleibt dir überlassen...

So ein Schwachsinn, so etwas mit JavaScript zu lösen. Total veraltet.
Das Zauberwort heißt Media Queries.

 

[Teisi]

also erstens is das kein schwachsinn, denn es funktioniert.
zweitens hab ich die möglichkeit des einsetzens mit mediaquerys auch geschrieben.
drittens bin ich immer noch ned so ganz deiner meinung, so viel wie möglich quasi mit css zu lösen... da es diverse andere probleme damit gibt...

 

[Cool Master]

drittens bin ich immer noch ned so ganz deiner meinung, so viel wie möglich quasi mit css zu lösen... da es diverse andere probleme damit gibt...

Aha die da wären? Mehr Leute haben NoScript (oder ähnliche Addons) oder haben JS komplett aus. Den Style laden aber alle. Klar wenn man mit dem IE 6 unterwegs ist kann man halt nicht das volle CSS nutzen aber die min Version heute ist eh IE 9 alles andere wird, zumindest von mir, nicht mehr supportet.

 

[Daaron]

@Teisi:
Und um dir mal zu erklären, warum es Schwachsinn ist, über JavaScript die Browserbreite abzufragen... Um das korrekt umzusetzen musst du dich an das Resize-Event klemmen. Das belastet die Hardware (und somit auch den Stromverbrauch) gewaltig, wenn du nicht zusätzlich noch einen Timer einbaust. Mit Timer ruckelts aber zwangsweise.
Media Queries hingegen funktionieren mit voller Hardware-Beschleunigung, ruckelfrei und hochperformant.

Was die minimal unterstützte IE-Version angeht: IE8-Fallbacks kosten einfach extra, so einfach ist das.
Niemals sollte man modernen Browsern veraltete Technik aufzwingen, nur damit Holzköpfe mit Holzklasse-IEs auch ja jedes Pixel sehen können.