Probleme mit Bildstretcher und Content Slider

[Kahmoon]

Hallo zusammen,

ich habe für einen Kunden eine Webseite mit dem Contao Constructeur Template gebaut. Auf der Startseite ist ein Contao Core Content Slider mit Bildern die auf die volle Bildschirmhöhe angepasst werden.

Auf einem Desktop oder Notebook klappt das prima. Auf einem oder Tablet dem Handy leider nicht. Hier wird nur der Bereich links oben stark reingezommt dargestellt und enthält somit nur wischiwaschi Pixelbrei. Es sollte aber eigentlich eher der Bereich aus der Mitte des Bildes genommen werden und auch nicht so stark gezoomt.

Bei den Bildern sind keine Größen eingestellt - Siehe Anhang. Sobald ich mit Bildgrößen spiele....zerhauts mir das Ganz stretching komplett.


Das Template sieht wie folgt aus

<?php $this->extend('block_searchable'); ?>


<?php $this->block('content'); ?>


  <?php if (!$this->addBefore): ?>
        <?php echo $this->text; ?>
  <?php endif; ?>


  <!--
  <?php if ($this->addImage): ?>
    <figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>


      <?php if ($this->href): ?>
        <a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
      <?php endif; ?>


      <?php $this->insert('picture_default', $this->picture); ?>


      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>


      <?php if ($this->caption): ?>
        <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
      <?php endif; ?>


    </figure>
  <?php endif; ?>
-->


<div class="bgStyle" style="background-image:url(<?php echo $this->picture['img']['src'] ?>)" >
  <?php if ($this->addBefore): ?>
    <div class="container overlayContent"><?php echo $this->text; ?></div>
  <?php endif; ?>
</div>


<?php $this->endblock(); ?>

Jemand ne Idee wie ich das gelöst bekomme? Muss ich hier doch mit responsive Bildgrößen ran? Oder doch per CSS?

Hatte mich auch schon an den Themeanbieter gewendet, das ist aber zäh :-). Ich denke hier bin ich besser aufgehoben.

VG
Frank

[Seefahrer]

Dieses Phänomen hatte ich vor einiger Zeit genauso auf iPad und iPhone als ich Bilder mit background-attachment: fixed und background-size: cover positionieren wollte. Googeln ergab, dass dies generell unter IOS und bei einigen Android Browsern nicht funktioniert. Da ich auf einer Onepage Seite mehrere Hintergrundbilder verwende, habe ich ein media-query mit background-attachment: scroll genommen.

Für die Verwendung nur eines Hintergrundbildes gibt es zahlreiche workarounds, einfach einmal mit o.g. Suchbegriffen googeln ( ios background-attachment ...)

[Kahmoon]

Danke. Diese Anweisung habe ich inzwischen auch als "Schuldigen" festgestellt....Workaround ist aktuell noch unbefriedigend