Verwendung: Slider-Bilder auch auf kleineren 'media screens' korrekt anpassen

Bernhard's Avatar

Bernhard

01 Feb, 2021 03:26 PM

Produkt: Open Sauce Contao
Contao-Version: 4.9.11
Browser und Browserversionen: Firefox 85.0

Hallo!
Es gelingt mir leider nicht den Bilder-Slider auf der Statrseite einer neuen Kunden-Website so anzupassen, dass auch auf kleineren Geräten die Darstellugn so angepasst wird, dass nicht nur das Bild sondern auch der umgebende 'Container' mitgezoomt wird. Derzeit wird zwar das Bild angepasst jedoch entstehet am obern und unteren Rand ein großer leerer Bereich. Wie kann ich das via CSS anpassen? Welche 'Klasse' muss ich adaptieren?
Vorweg schon Danke für die Unterstützung!

  1. Support Staff 1 Posted by RockSolid Theme... on 02 Feb, 2021 10:22 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sie können in den Moduleinstellungen des Sliders als Höhe die Proportion 1200x600 einstellen. Somit passt sich die Höhe automatisch im Verhältnis zur Breite des Sliders an.

  2. 2 Posted by Bernhard Teppan on 02 Feb, 2021 01:41 PM

    Bernhard Teppan's Avatar

    Danke für die Antwort.
    Das habe ich bereits selbst versucht, nur funktioniert das leider nur bedingt.
    Das Bild wird nun auf die volle Breite ausgedehnt und auf Grund der Originalauflösung von 1200x600px pixelig.

  3. Support Staff 3 Posted by RockSolid Theme... on 02 Feb, 2021 02:00 PM

    RockSolid Themes's Avatar

    In diesem Fall können Sie z. B. die Breite des Sliders auf 1200 Pixel beschränken:

    .main-content .rsts-main {
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
    
  4. 4 Posted by Bernhard Teppan on 02 Feb, 2021 02:05 PM

    Bernhard Teppan's Avatar

    Perfekt - genau das habe ich gesucht!
    Vielen herzlichen Dank!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac