Bildhöhe Slideshow

[TimoE]

Hallo,

ich habe in meinem Shop zur Anzeige von Bannern eine Slideshow verwendet. Bildgröße habe ich wie empfohlen verwendet. Allerdings wird die Bildhöhe in der Desktopversion je nach PC und Einstellungen des Betrachters immer abgeschnitten.

Gibt es hierzu einen CSS Code um das Bild in voller Höhe anzuzeigen ?

https://www.shop.tedesignz.de/

Hier die Ansicht aus dem Editor:

Hier die Ansicht des Benutzers:

Vielen Dank für eure Hilfe

[Gabe]

Hey @TimoE

Danke für den Link und das habe ich jetzt in der Dev Console analysieren können (siehe unsere Anleitung dazu hier).

Um das Problem des Abschneidens von Bildern in der Slideshow in der Desktopversion deines Shopify-Shops zu lösen, kann CSS eingesetzt werden, um eine bessere Anpassung der Bilder an verschiedene Bildschirmgrößen zu erreichen. Hier sind ein paar CSS-Anpassungen, die helfen könnten, das Bild vollständig anzeigen zu lassen, ohne dass es abgeschnitten wird:

Bilder als Hintergrundbilder einzusetzen und die CSS-Eigenschaft background-size zu nutzen. Hierbei gibt es verschiedene Werte, die du verwenden kannst:

• cover: Skaliert das Hintergrundbild, sodass es den Container vollständig bedeckt, ohne dabei das Seitenverhältnis zu verzerren.
• contain: Skaliert das Bild so, dass es komplett sichtbar ist, ohne abgeschnitten zu werden, aber es kann leerer Raum im Container entstehen.

Hier ein Beispiel für die Implementierung:

.slideshow__media {
  background-image: url('Pfad-zum-Bild');
  background-size: cover; /* oder 'contain', je nach Bedarf */
  background-position: center;
  height: 100%; /* Stelle sicher, dass die Höhe ausreichend ist */
}

Eine andere Möglichkeit besteht darin, die Höhe des Containers dynamisch anzupassen, um das Bildverhältnis zu erhalten. Dies kann erreicht werden, indem die Höhe basierend auf der Bildschirmbreite angepasst wird:

.slideshow__media {
  width: 100%;
  height: auto; /* passt die Höhe automatisch an die Breite an */
}

Um eine bessere Kontrolle für verschiedene Bildschirmgrößen zu haben, kannst du Media Queries verwenden, um die Eigenschaften des Slideshows je nach Gerätetyp anzupassen:

@media (min-width: 1024px) { /* für Desktop-Geräte */
  .slideshow__media {
    height: 500px; /* oder jede andere feste Höhe */
  }
}

@media (max-width: 1023px) { /* für Tablets und Mobilgeräte */
  .slideshow__media {
    height: 300px; /* eine geringere Höhe für kleinere Geräte */
  }
}

Wenn die Höhe zu restriktiv ist, kann das Bild abschneiden. Überlege, ob eine maximale Höhe sinnvoll ist, um sicherzustellen, dass das Bild vollständig sichtbar ist:

.slideshow__media {
  max-height: 100vh; /* stellt sicher, dass das Bild nicht höher als der Bildschirm ist */
}

Hoffe das hilft dir weiter - lass wissen falls nicht!

---

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[TimoE]

Vielen Dank für die Antwort.

Ich habe den CSS Code direkt im Bereich der Slideshow eingesetzt leider ändert sich nichts.

Wo setze ich den CSS Code ein?

[Gabe]

Hey @TimoE

Das wäre die Stelle. Oder das CSS Kästchen auf der linken Seite auf Top-Level.

Es scheint aber dein Mavoc Theme arbeitet etwas anders mit dem CSS. Wie gesagt du musst überlegen, ob eine maximale Höhe sinnvoll ist, um sicherzustellen, dass das Bild vollständig sichtbar ist. Die Bilder sind halt Responsive, wie hier abgebildet:

Oben siehst du dass der Responsive Cut-off by 1011px x 1011px liegt:

Das Mavoc Theme habe ich jetzt selber im Testshop getestet und das einzige was ich dir empfehlen kann, ist es die eingebauten Slideshow Einstellungen zu verwenden.

In der Theme Doku steht folgendes:

• Adapt to first image: Uses the aspect ratio of the slider’s first image the other images are cropped.
• Small: This is the smallest height of the slider. Desktop height: 500px, Mobile height: 280px
• Medium: This is the medium height of the slider. Desktop height: 650px, Mobile height: 340px
• Large: This is the maximum height of the slider. Desktop height: 890px, Mobile height: 390px

Siehe bitte auch die Theme Doku dazu oder kontaktiere die Theme Entwickler denn die können damit am besten beraten:

Du kannst auch einen weiteren CSS probieren aber ich habe meine Zweifeln ob er beim Mavoc Theme greifen wird denn die Section Classes sind da einfach anders als bei den Shopify Themes:

1. Stelle sicher, dass der Container der Slideshow die volle Höhe hat.
2. Verwende background-size: contain, um sicherzustellen, dass das gesamte Bild sichtbar ist.
3. Verwende Media Queries, um die Höhe der Slideshow je nach Gerätetyp anzupassen.

Hier ist ein Beispiel eines weiteren CSS-Code:

/* Slideshow Container */
.slideshow__wrapper {
  height: 100vh; /* Volle Höhe des Ansichtsfensters */
  overflow: hidden; /* Verhindert das Scrollen */
}

/* Slideshow Media */
.slideshow__media {
  background-image: url('Pfad-zum-Bild');
  background-size: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/* Media Queries für verschiedene Bildschirmgrößen */
@media (min-width: 1024px) { /* für Desktop-Geräte */
  .slideshow__media {
    height: 100vh; /* Volle Höhe des Ansichtsfensters */
  }
}

@media (max-width: 1023px) { /* für Tablets und Mobilgeräte */
  .slideshow__media {
    height: auto; /* Passt die Höhe automatisch an die Breite an */
    max-height: 100vh; /* Stellt sicher, dass das Bild nicht höher als der Bildschirm ist */
  }
}

Stelle sicher, dass dein HTML so aussieht, dass die CSS-Klassen korrekt zugewiesen sind. Hier ist ein Beispiel, wie das in deinem HTML aussehen könnte:

• Achte auch darauf, dass du die korrekten Bildpfade (Pfad-zum-Bild) verwendest.
• Die Klasse .small-hide und .d-sm-only-visible sollten verwendet werden, um sicherzustellen, dass die mobilen und Desktop-Bilder korrekt angezeigt werden.
• Verwende background-size: contain anstelle von cover, um sicherzustellen, dass das gesamte Bild sichtbar ist. cover schneidet das Bild oft ab, um den Container zu füllen, während contain das gesamte Bild einpasst.

Poste auch deine Frage in unserem Experten Design Forum hier aber auf Englisch und mit einem Link zum Shop, und da wird sich einer unserer Experten sicherlich melden.

Wenn du es selber DIY programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht!