Zoom von Foto ändert Seitenverhältnis.

[MoltenCore]

Abend, ich habe mittels Benutzerdefiniertem Liquid ein Command erstellt, der ähnlich wie bei Apple macht, dass wenn man auf der Seite runter Scrollt, ein Bild heran-/weggezoomt wird und ein Text rein faded. Nun entsteht dadurch mein Problem, dass die Website durch den Zoom ihr Größenverhältnis verändert da sie davon ausgeht, dass ich innerhalb des gezoomten Bildes auch horizontal zoomen möchte. Ich hätte es aber gerne wie bei Apple dass zwar das Bild nah ran gezoomt wird aber dann außer Sichtweite verschwindet und das Seitenverhältnis gleich bleibt. Habe schon etliche commands im Quellecode probiert. Hat jemand da eine Idee? 

Dankeschön im Voraus 

[Gabe · Accepted solution]

Hey @MoltenCore 

Danke für die Info aber ohne konkrete Beispiele wird es schwierig sein dir zu helfen. Ich gehe aber mal von folgendem aus da ich hier derzeit mit Guesswork auskommen muss: 

Um zu verstehen, warum sich das Seitenverhältnis deiner Bilder ändert, wenn du sie heranzoomst, ist es wichtig, das Konzept des Seitenverhältnisses zu verstehen. Das Seitenverhältnis eines Bildes ist das Verhältnis zwischen seiner Breite und seiner Höhe. Ein Bild mit einer Größe von 200 x 400 Pixeln hat zum Beispiel ein Seitenverhältnis von 1:2. Ein Bild mit den Maßen 150 px x 450 px hat ein Seitenverhältnis von 1:3. Um zu berechnen, ob die Bilder das gleiche Seitenverhältnis haben, teilst du die Breite der Bilder durch die Höhe und vergleichst dann die Ergebnisse.

Du kannst den Shopify Media-editor verwenden, um deine Bilder so zuzuschneiden, dass sie das gleiche Seitenverhältnis haben. Mehr dazu hier.

Außerdem kannst du einen benutzerdefinierten Liquid-Code verwenden, um einen benutzerdefinierten Bereich auf deiner Website zu erstellen. Mehr dazu hier.

Es scheint, als müsstest du das Skalierungsverhalten des Bildes anpassen, um das von dir gewünschte Verhalten zu erreichen. Möglicherweise kannst du die CSS-Eigenschaft "object-fit" für das Bild verwenden, um zu steuern, wie es innerhalb des Containers skaliert wird.

Wenn du "object-fit: cover" anwenden, wird das Bild so skaliert, dass es den Container vollständig ausfüllt, während das Seitenverhältnis beibehalten wird. Dies kann dazu beitragen, dass das Verhältnis der Website beibehalten wird, wenn das Bild herangezoomt wird. Beachten Sie jedoch, dass "object-fit" nicht von allen Browsern vollständig unterstützt wird, insbesondere ältere Versionen.

----
Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.