Productpage/Image

[Limanko_77]

Hallo zusammen, 

kann mir einer helfen und sagen wie ich das Bild im Vollbild angezeigt bekomme, also so dass der linke und obere Rand auch mit dem Bild ausgefüllt ist? Die Paddings möchte ich nicht verschieben, da es im Desktopmodus so bleiben soll, aber in der Mobilen Ansicht soll das Foto die markierten Ränder ausfüllen.

 

Vielen Dank im Voraus. 

[Gabe]

Hey @Limanko_77 

Da du sehr viele Fragen bzgl. Änderungen zu deinem Theme hier gestellt hast, ist mein erster Eindruck, dass du nicht sehr zufrieden mit deinem Gratis Dawn Theme bist. Frage dazu: hast du auch andere Themes zum Shop hinzugefügt, die ggf. besser für deine Zwecke, deine Produkte, dein Branding, und Zielpublikum geeignet sind? Wir haben auch tolle Premium Themes die das ganze einfach viel besser können, und gerne kann ich zu deinem Shop Tipps für bessere Themes abgeben.

Um das Bild auf mobilen Geräten bildschirmfüllend anzuzeigen, ohne dabei die Paddings auf Desktop-Ansichten zu beeinflussen, kannst du media queries in deinem CSS verwenden. Hier ist ein Beispiel, wie du dies umsetzen könntest:

@media only screen and (max-width: 768px) {
  .deine-bildklasse {
    width: 100vw; /* Stellt sicher, dass das Bild die volle Viewport-Breite einnimmt */
    height: auto; /* Behält das Seitenverhältnis des Bildes bei */
    position: relative; /* oder absolute, je nach deinem Layout */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* Entfernt jeglichen Abstand, den das Bild haben könnte */
  }
}

Ersetze .deine-bildklasse durch die tatsächliche Klasse oder ID deines Bild-Elements. Die obige Regel bewirkt, dass auf Geräten mit einer Bildschirmbreite von bis zu 768px (was die meisten mobilen Geräte abdecken sollte) das Bild angepasst wird, um den Viewport auszufüllen.

Die Eigenschaft transform: translate(-50%, -50%) zusammen mit top und left wird oft verwendet, um ein Element genau in der Mitte zu positionieren. Das kann nötig sein, wenn das Bild nicht automatisch zentriert ist, aber diese Technik sollte mit Vorsicht genutzt werden, da sie unter Umständen den restlichen Inhalt beeinflussen kann. Teste daher die Änderungen gründlich auf verschiedenen Geräten.

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.

[Limanko_77]

Hallo Gabe,

beim eingeben deines Codes passiert folgendes: Der Container in dem das Bild liegt verlängert sich nach oben und unten aber das Bild selber ist immer noch gleichgroß, siehe bild. 

Hast du vielleicht noch eine andere Lösung ?

Hätte es gerne so wie in diesem Beispielbild

 

 Vielen Dank.

[Gabe]

Hey @Limanko_77 

Hast du das lösen können? Wenn nein, poste hier bitte einen Direktlink zum Problem (bitte mit Passwort falls passwortgeschützt), so dass ich das analysieren kann.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Limanko_77]

Hey Gabe,

ja gerne. 

https://c7b7a6-2.myshopify.com/products/baby-pink-contour

pw: paysha

[Gabe]

@Limanko_77 

Danke und probiere mal CSS-Media-Queries zu verwenden, die nur auf mobile Ansichten angewendet werden. Dies würde bedeuten, dass du CSS-Code schreibst, der die width und height deines Bildcontainers und des Bildes selbst anpasst, um den Raum entsprechend auszufüllen. Der von dir beschriebene Effekt, dass sich der Container verlängert, aber das Bild selbst nicht skaliert wird, deutet darauf hin, dass möglicherweise das background-size Attribut oder ähnliche CSS-Eigenschaften angepasst werden müssen, damit das Bild korrekt skaliert wird.

Hier ein generelles Beispiel, wie der CSS-Code aussehen könnte:

@media only screen and (max-width: 768px) {
  .product-media-container {
    width: 100%; /* passt die Breite an */
    height: auto; /* passt die Höhe dynamisch an */
    position: relative; /* behält die Position bei */
  }
  .product__media img {
    width: 100%; /* lässt das Bild die Breite ausfüllen */
    height: auto; /* behält das Seitenverhältnis bei */
    object-fit: cover; /* sorgt dafür, dass das Bild den Container ohne Verzerrung ausfüllt */
  }
}

Um eine spezifische Lösung zu finden, wäre es hilfreich, den genauen Code zu sehen. In deinem Fall müsste der Code für das Bild-Element (<img>) und den umschließenden Container (<div class="product-media-container">) entsprechend angepasst werden, um sicherzustellen, dass das Bild den gesamten verfügbaren Raum ausfüllt, ohne das Seitenverhältnis zu verzerren.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉