FROM CACHE - de_header
Gelöst

Bildgröße Laptop und Handy

THMP12345
Entdecker
20 0 3

Hallo, ich habe das Problem, dass mein Titelbild zwar auf der Webversion eine gute Größe hat und alles angezeigt wird, leider wird in der Mobilversion das Bild abgeschnitten. 
Wie kann ich dies ändern? Und welche Bildgröße verwende ich am besten?
Danke für die Hilfe!

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
15924 2524 3768

Erfolg.

Hey @THMP12345 

 

Danke für die Frage und auf Handy werden die Bilder die auf Desktop gut aussehen, oft leider ge-croppt. Die Bilder sind das Brot und Butter eines Online Shops und hier muss die Fotografie 100% stimmen.

 

Das Problem liegt oft an den Bilder-Dimensionen und dem Theme Platzhalter der Fotos im Theme festlegt. Diese sind auch anders dimensioniert auf Mobile als auf Desktop, wie z. B. 16:9 versus 3:4. Manche Themes verwenden komplexe Algorithmen die die Dimensionen zw. Desktop und Mobile automatisch übersetzen, so dass das Foto auch auf Mobile nicht abgeschnitten aussieht, aber die meisten Themes machen das nicht.

 

 

Welches Theme hast du und bei "Titelbild" meinst du den "Hero Banner" ganz oben auf der Homepage, ist das richtig? Hast du vieleicht einen Link zu deiner HP so dass ich da mal reinschauen kann auf Desktop und Handy? Das kann manchmal auch auf verschiedene Handy Browser anders gerendert werden.

 

Somit wird das eine Programmierung verlangen je nach Theme Code dass du hast. Du könntest z. B. ein ganz anderes Foto auf Mobile anzeigen oder das selbe das aber anders in den Dimensionen geschnitten ist. Siehe ein YT Video der zeigt wie man das im Debut Theme machen kann hier.

 

Du kannst in deinen Theme Editor gehen und im Hero Section sieht man oft eine eine Einstellung wie "Section height". Wenn du diese Einstellung von "Mittel" auf "Groß" oder sogar "Extra groß" umstellt dann kann dein Bild besser auf Mobile aussehen.

 

Die Höhe deines Hero Banners ist meist auf 475px (im theme.scss.liquid) für alle Bildschirme mit einer Mindestbreite von 750px eingestellt. Du kannst diese Höhe in der besagten Datei (aber zuerst in einer Testumgebung) ändern und eine Höhe einstellen, die den Teil des Bildes zeigt, den du anzeigen möchtest.

 

Du könntest sie zum Beispiel auf 87vh oder REM einstellen (was auf meinem Bildschirm gut aussieht).
Die Einheit vh oder REM ist relativ zur Höhe deines Ansichtsfensters - 1vh ~ 1% der Höhe des Ansichtsfensters.

 

Bei weiteren Fragen raten wir einen Fotografen oder Experten zu konsultieren den die können hier am besten helfen. Gerne kann ich welche empfehlen.

 

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

1 ANTWORT 1

Gabe
Shopify Staff
15924 2524 3768

Erfolg.

Hey @THMP12345 

 

Danke für die Frage und auf Handy werden die Bilder die auf Desktop gut aussehen, oft leider ge-croppt. Die Bilder sind das Brot und Butter eines Online Shops und hier muss die Fotografie 100% stimmen.

 

Das Problem liegt oft an den Bilder-Dimensionen und dem Theme Platzhalter der Fotos im Theme festlegt. Diese sind auch anders dimensioniert auf Mobile als auf Desktop, wie z. B. 16:9 versus 3:4. Manche Themes verwenden komplexe Algorithmen die die Dimensionen zw. Desktop und Mobile automatisch übersetzen, so dass das Foto auch auf Mobile nicht abgeschnitten aussieht, aber die meisten Themes machen das nicht.

 

 

Welches Theme hast du und bei "Titelbild" meinst du den "Hero Banner" ganz oben auf der Homepage, ist das richtig? Hast du vieleicht einen Link zu deiner HP so dass ich da mal reinschauen kann auf Desktop und Handy? Das kann manchmal auch auf verschiedene Handy Browser anders gerendert werden.

 

Somit wird das eine Programmierung verlangen je nach Theme Code dass du hast. Du könntest z. B. ein ganz anderes Foto auf Mobile anzeigen oder das selbe das aber anders in den Dimensionen geschnitten ist. Siehe ein YT Video der zeigt wie man das im Debut Theme machen kann hier.

 

Du kannst in deinen Theme Editor gehen und im Hero Section sieht man oft eine eine Einstellung wie "Section height". Wenn du diese Einstellung von "Mittel" auf "Groß" oder sogar "Extra groß" umstellt dann kann dein Bild besser auf Mobile aussehen.

 

Die Höhe deines Hero Banners ist meist auf 475px (im theme.scss.liquid) für alle Bildschirme mit einer Mindestbreite von 750px eingestellt. Du kannst diese Höhe in der besagten Datei (aber zuerst in einer Testumgebung) ändern und eine Höhe einstellen, die den Teil des Bildes zeigt, den du anzeigen möchtest.

 

Du könntest sie zum Beispiel auf 87vh oder REM einstellen (was auf meinem Bildschirm gut aussieht).
Die Einheit vh oder REM ist relativ zur Höhe deines Ansichtsfensters - 1vh ~ 1% der Höhe des Ansichtsfensters.

 

Bei weiteren Fragen raten wir einen Fotografen oder Experten zu konsultieren den die können hier am besten helfen. Gerne kann ich welche empfehlen.

 

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog