Bild wird abgeschnitten in jeder Ansicht (Dawn)

[Julius23]

Moin,

Ich bin gerade dabei einen Shop für Weine zu erstellen. Beim einfügen des Bildes einer Flasche wird dieses komplett abgeschnitten egal ob Vollbild, Desktop oder Mobilansicht. Ich finde nach extrem langem suchen immer noch keine Lösung wie dieses Bild voll angezeigt wird. Im ersten Bild sieht man wie ich es haben möchte und im zweiten wie mom. ist. 

P.S. ich habe das gleiche Problem bei einem „Text mit Bild“ Modul. Dort wird ein von mir eingefügtes Logo rechts immer abgeschnitten egal was ich tue.

Danke im Vorraus

Julius

[Gabe]

Hey @Julius23 

Ich weiss was du meinst und ich vermute das liegt am Bild-Aspekt der Flasche was sehr vertikal ist mit transparenten Hintergrund und deswegen wird die Flasche vom Theme abgeschnitten.

Siehe ein ähnliches Shop hier wo das von einem Experten eingebaut wurde um das Abschneiden zu verhindern. Hast du das in versch. Themes getestet denn alle Themes machen das auf versch. Arten und Weisen wie die Bilder dargestellt werden?

Der Sachverhalt

Alle responsive Bilder ändern ihre Auflösung je nach Bildschirmgröße, um die Geschwindigkeit der Website und das SEO-Ranking zu optimieren. Das Theme arbeitet so um eine optimale Balance zu finden. 

"Responsive Bilder sind Bilder, die auf die Größe des Bildschirms, auf dem sie angezeigt werden, reagieren. So werden deine hochauflösenden Bilder unabhängig vom Gerät genau richtig dargestellt. Das Update für responsive Bilder sorgt dafür, dass die Bilder gestochen scharf sind und weder zu groß noch zu klein für jede Bildschirmgröße oder Displayqualität." - Pixel Union

Das bedeutet, dass unsere Shopify-Themes in der Lage sind, die optimale Bildauflösung für jede Bildschirmgröße zu erstellen und anzuzeigen, solange man qualitativ hochwertige Bilder verwenden, was dazu beiträgt, dass die Bilder für alle Geräte zugänglich sind und die Ladegeschwindigkeit der Seite niedrig bleibt.

Bildraster beziehen sich auf Produktbilder, die auf einer PDP oder Kollektionsseite oder in einem Abschnitt mit einer vorgestellten Kollektion angezeigt werden. Da diese Bilderraster responsiv sind, wird allgemein empfohlen, dass man die Produktbilder mit einem einheitlichen Seitenverhältnis hochladet, sprich, ein quadratisches Bild anstatt ein hochkantiges, wie in deinem Beispiel, was eine einheitlichere Darstellung auf allen Bildschirmen ermöglicht.

Produkt- und Kollektionsbilder können eine beliebige Größe bis zu 5000 x 5000 px oder 25 Megapixel haben (für quadratische Produktbilder sieht eine Größe von 2048 x 2048 px normalerweise am besten aus). Siehe mehr zum Thema in unserem Blog hier.

Wenn das Dawn Theme keine spezifischen Einstellungen dafür bietet, musst du möglicherweise die CSS-Styles direkt anpassen. Apropos eine App wie PICX-Photo Resize kann die Bilder auch für dich ganz einheitlich präsentieren!

Suche nach den CSS-Klassen, die für die Darstellung der Produktbilder oder des Bildes mit Text verantwortlich sind, und passe die max-height, width, object-fit oder andere relevante CSS-Eigenschaften an. Ein CSS Beispiel:

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

Hier ist, was dieser CSS bewirkt:

• max-width: 100%; stellt sicher, dass das Bild nie breiter als sein Container ist.
• height: auto; behält das ursprüngliche Seitenverhältnis des Bildes bei und verhindert eine Verzerrung.
• object-fit: contain; sorgt dafür, dass das gesamte Bild im Container sichtbar ist, auch wenn das bedeutet, dass es kleiner skaliert werden muss.

Ich empfehle dir, die Shopify Community-Foren zu besuchen oder Shopify-Support für detailliertere Unterstützung zu kontaktieren. Dort könnten andere Nutzer oder Shopify-Experten, die ähnliche Probleme gelöst haben, ihre Lösungen teilen.

---
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 👀!

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.

[Julius23]

Moin, das Bild welches ich dort verwende ist aber ja kein Produktbild bzw. nicht dieses Produktvorschau-modell was man in Dawn einbauen kann. Ich habe einfach das Modul "Bild mit Text" genutzt. Und dort gibt es irgendwie nicht die möglichkeit das Bild anzupassen.