[easy_bg_stretcher] Bilder werden zu groß dargestellt

[AndiK]

Hallo!

Ich habe ich ein großes Problem, bei dem ich eure Hilfe benötige:

Die von mir verwendeten Bilder werden in Breite und Höhe nicht der Seite genau angepasst. Sie sind immer circa 15% zu breit und zu hoch.
Die Bilder werden also nicht so beschnitten, wie sie eigentlich erscheinen sollen.

Kann man den Stretcher auch so anpassen, dass die Bilder dem #container angepasst werden?

Hier der Link zur betreffenden Seite.

lg
Andi

[Spooky]

Ich selbst habe easy_bg_stretcher noch nicht ausprobiert. Da der .backstretch container aber einen Abstand nach oben für den Header berücksichtigt, gibt es evt. auch eine Konfigurationsmöglichkeit für einen Abstand nach unten?

( https://community.contao.org/de/show...l=1#post283166 )

[Dirch]

Die Bilder werden also nicht so beschnitten, wie sie eigentlich erscheinen sollen.

Kann man den Stretcher auch so anpassen, dass die Bilder dem #container angepasst werden?

Sieht doch alles gut aus?! Der BG-Stretcher behält die Proportionen des Bildes bei und daher muß er die Bilder auch entsprechend über den sichtbaren Bereich hinaus skalieren - sonst käme es ja zu sichtbaren Rändern.

Ich weiß nicht was du mit "beschnitten" meinst, aber der BG-Stretcher ändert an den geladenen Bildern nichts. Er sorgt nur dafür, daß zu gegebener Fenstergröße das Bild vollflächig den Hintergrund abdeckt unter Berücksichtigung der Proportionen. Das führt technisch dazu, daß vom Bild unter Umständen am Rand nicht alles zu sehen ist. Anders ginge es nur, wenn du auf das Proportionale verzichtest - aber das willst du nicht...

[Spooky]

Ich weiß nicht was du mit "beschnitten" meinst

Der Background stretcher fügt das Bild über ein eigenes div mit der Klasse "backstretch" ein, welches eher am Ende des DOM Baumes steht. Dieses div wird mit position:fixed; positioniert und es wird eine gewisse Größe dafür festgelegt, welche mit JavaScript dynamisch verändert wird. Das div mit kompletten inline style sieht dann zB so aus:

<div class="backstretch" style="left: 0px; top: 110px; overflow: hidden; margin: 0px; padding: 0px; height: 459px; width: 1663px; z-index: -999999; position: fixed;"> … </div> 

Wie man sieht wird das div mit top:110px; positioniert, damit das Bild nicht oben vom Header abgeschnitten wird. Allerdings berücksichtigt die Zuweisung der Höhe nicht den Footer, daher wird das Bild vom Footer unten überdeckt (und daher "abgeschnitten").



(Davon abgesehen: dieses Bild wird bei einem sichtbaren Seitenverhältnis, dass noch breiter ist als das des Bildes, sowieso abgeschnitten.)

[AndiK]

Den Versatz von top:110px habe ich selbst in das Script eingesetzt, damit der Header das Bild nicht überdeckt.

Ich verstehe nicht, warum das Bild nicht in Höhe und Breite dem sichtbaren Rahmen angepasst wird. Es steht ja nach unten und zur rechten Seite noch jede Menge Bild "zur Verfügung".

[AndiK]

So, ich hab das Startbild jetzt mal oben und unten eingefärbt und den top auf 0 gesetzt.

Wenn man einen Monitor mit Full HD Auflöung hat, wird das Bild korrekt positioniert. Bin ich auf einem Monitor mit geringerer Auflösung oder verkleinere das Fenster, wird schnell klar, wo mein Problem ist.

[Spooky]

Ich verstehe nicht, warum das Bild nicht in Höhe und Breite dem sichtbaren Rahmen angepasst wird.

Es wird einfach vom Footer (und aktuell auch vom Header, da du das top weggegeben hast) verdeckt.

Und an Höhe und Breite kann das Bild nicht angepasst werden, sonst hättest du innerhalb des containers Bereich, die nicht vom Bild verdeckt werden. Je nach Seitenverhältnis von Bild und Container wird das Bild entweder auf die volle Höhe oder die volle Breite des Containers skaliert.