bilder werden 'zerquetscht' d.h. nur in einer dimension skaliert

**Gundel** · 17.01.2013, 16:10

Hallo zusammen
Ich bin ziemlich neu mit Contao unterwegs und bin (im verlgeich zu anderen CMS) total glücklich. Ich baue eine Site mit Contao 3.
Ich brauche einen Background-Slider. Ich habe einen gefunden (bgSlider) aber wenn ich den installiere, werden die Bilder beim Verkleinern des Browserfensters einseitig skaliert. d.h. wenn ich das Fenster in der Breite verkleinere, wird das Bild in der Breite zusammengestaucht... ich hoffe, ihr wisst was ich meine. Ich hab dann versucht, einen jQuery Slider eigenhändig einzubauen, was zwar nicht funktioniert hat (die bilder sliden nicht, ist wohl mein Fehler...) aber die Bilder werden ebenfalls verzogen. Für mich heisst das, dass ich in Contao eine falschen Einstellung gemacht habe, bzw.dass Contao von sich aus die Bilder skaliert.
Liege ich mdamit richtig?
Was muss ich jetzt tun?
Vielen vielen Dank!

**Messa** · 17.01.2013, 17:56

Hast du im Seitenlayout Jquery aktiviert?
Ist die Erweiterung für Contao 3 freigegeben?

lg Matthias

**Gundel** · 17.01.2013, 19:40

hallo Matthias
Es ist eine MooTools Erweiterung und das ist aktiviert.
Zudem ist sie für Contao 3 freigegeben.
Die Erweiterung selber läuft ja eigentlich, das Problem ist die seltsame Skalierung der Bilder, und das nicht nur in dieser Erweiterung.
Darum denke ich, das Problem muss anderswo liegen.
Gruss Gundel

**Messa** · 17.01.2013, 19:54

Link?
Hast eventuell was im CSS drinnen was dem in die quere kommt?

**Gundel** · 17.01.2013, 20:01

http://yas.schönzha.ch/

hier der link.
die site besteht bist jetzt nur aus der index, die wiederum nur aus dem background besteht, darum ist das css beinahe leer.
gruss gundel

**derRenner** · 18.01.2013, 09:48

Hallo,

ich kenne den [bgSlider] nicht und kann hier jetzt mal nur mutmassen, aber ich vermute, dass bei dir folgendes passiert: Deine Bilder sind 800x532px gross. Durch den bgSlider werden diese nun auf die gesamte Bildschirmbreite hochskaliert, sodass du ein ganzes Bild (wohl aber schon in die Breite gestreckt) siehst. Wenn du nun das Browserfenster in der Breite verkleinerst, wird das Bild wieder in Richtung ursprüngliche Bildbreite "zurückskaliert" - und das dürfte dann der Effekt sein, den du beschreibst, bzw. den ich so aus deiner Beschreibung rauslese - also, dass es so aussieht, als würde sich das Bild zusammenstauchen.
Irgendwann hat dann die Fensterbreite die 800px und damit die Originalgrösse des Bildes erreicht und das Bild wird nicht mehr "gestaucht".

**Gundel** · 18.01.2013, 10:08

hallo. danke für die antwort. klingt äusserst logisch. bedeutet das, dass sich das problem beheben lässt, indem ich die bilder grösser mache?
sollten sie denn grösser sein als das browserfenster?
ich wollte eigentlich, dass die bilder mitskalieren, aber horizontal und vertikal zugleich und nicht nur auf eine seite.
geht das?
herzlichen dank.
gundel

**derRenner** · 18.01.2013, 10:20

ich kenne deine Bildschirmformate nicht - aber experimentiere doch mal mit verschiedenen Bildergrössen ...

Was das horizontale und vertikale Skalieren angeht, sehe ich bei mir hier am Laptop keine Problem - also bei mir ändert sich Höhe und Breite entsprechend der Browserfenstergrösse

**Messa** · 18.01.2013, 11:01

Sieht aus als würde der Script nicht funktioniern. hmm.
Da Das Bild jetzt über das CSS immer auf 100% Breite und Höhe gestreckt wird.
Und das unproportional. Normalerweise gibt es im Script dann ein ratio, dass das Bild
proportional skaliert.

lg Matthias

**Gundel** · 18.01.2013, 11:19

hallo zusammen
danke für eure antworten. in der demo von der erweiterung funktioniert es richtig.
seltsamerweise hatte ich dasselbe problem mit einem anderen script, darum dachte ich, es könnte an einer einstellung in contao liegen. ich werd mal weiter suchen.
lieber Renner, was hast du denn für einen browser? Das Problem entsteht nicht beim Verkleinern, sondern beim Vergrössern.
Herzlichen Dank
Gundel

***Nina*** · 19.01.2013, 15:52

Lade dir mal testweise im Backend unter "Templates" das fe-Template und lösche daraus diesen Eintrag:

HTML-Code:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Schau danach, ob es jetzt anders ist.

**Gundel** · 21.01.2013, 07:49

Liebe Nina.
Ich kann diese Zeile nicht finden im fe_page.html5. Ich sehe im Quelltext auch, dass die zeile dort erscheint.
Wo die wohl herkommt? Wenn ich die Zeile im Firegub lösche, ändert sich bei mir nichts.

**planepix** · 21.01.2013, 07:59

Hallo Gundel,

das müsste in der fe_page.html5 diese Zeile sein:

Code:

<?php echo $this->viewport; ?>

**Gundel** · 21.01.2013, 08:23

Liebe Nina.
Ja, da hab ich sie gefunden. Leider ändert sich nichts. Danke trotzdem.
lg Meret

**Gundel** · 21.01.2013, 08:34

sorry, planepix, das war ja von dir. also danke dir.
lg Gundel

**chinagirl** · 29.01.2013, 13:19

hallo gundel!

hast du schon eine lösung gefunden?
ich habe genau das gleiche problem.

lg, chinagirl

**Gundel** · 29.01.2013, 14:39

hallo chinagirl

ja und nein: ich hab die erweiterung deinstalliert und ein jquery plugin verwendet, das bestens funktioniert:

http://www.aaronvanderzwan.com/maximage/

es macht was ich will und lässt sich einfach einbinden.

lg, gundel

**chinagirl** · 29.01.2013, 15:40

danke gundel für den tipp!
werde ich mir ansehen...
glaubst du, dass es mit dieser erweiterung möglich ist jedem menüpunkt ein anderes hintergrundbild zuzuordnen?

lg chinagirl

**Gundel** · 29.01.2013, 16:18

hallo chinagirl
es ist ein slider, das heisst, dass die bilder wechseln. du kannst auf jeder seite einen artikel erstellen mit einem html element und dort die bilder reintun, die du haben möchtest. ich hab für einzelne bilder ohne slider auch schon die erweiterung 'easy background stretcher' verwendet. funktioniert gut, ich weiss aber nicht wies aufm iphone aussieht.
viel glück
gundel