javascript - Welche Methoden werden bei der Anzeige von Bildern auf Listenseiten von E-Commerce-Websites im Allgemeinen verwendet, um eine Bildverformung zu verhindern?

Ich möchte fragen, wie man eine Bildverformung auf einer Produktlistenseite ähnlich der im E-Commerce verhindern kann. Nun, ich habe mir Tmall und JD.com angesehen und festgestellt, dass das ursprüngliche Größenverhältnis der Bilder das gleiche ist. Gibt es eine einheitliche Regel für das Größenverhältnis der im Hintergrund hochgeladenen Bilder?

Antwortinhalt:

Ich möchte fragen: Wie kann man eine Bildverformung auf Produktlistenseiten verhindern, ähnlich wie beim E-Commerce? Nun, ich habe mir Tmall und JD.com angesehen und festgestellt, dass das ursprüngliche Größenverhältnis der Bilder das gleiche ist. Gibt es eine einheitliche Regel für das Größenverhältnis der im Hintergrund hochgeladenen Bilder?

Wenn Sie sicherstellen können, dass das Größenverhältnis des hochgeladenen Bildes mit dem Größenverhältnis der Anzeigefläche übereinstimmt, ist dies natürlich die beste Strategie (erreicht durch technische Managementsysteme).
Wenn dies nicht gewährleistet werden kann, kann das Bild als Hintergrundbild des Anzeigebereichs dargestellt werden. Wenn Sie den Wert für die Hintergrundgröße auf „cover“ setzen, kann sichergestellt werden, dass der Anzeigebereich vollständig und ohne Verzerrung abgedeckt wird und so viel Bildinhalt wie möglich angezeigt wird.

1. Begrenzen Sie das Bildgrößenverhältnis beim Hochladen von Bildern
2. Verarbeiten Sie das Bildgrößenverhältnis nach dem Hochladen. Wenn das Bildverhältnis falsch ist, wird es verformt
3. Verarbeiten Sie das Bild, wenn Sie es anzeigen Platzieren Sie das Bild in der Mitte oder lassen Sie das Bild den Anzeigebereich vollständig abdecken

Tatsächlich besteht eine wirtschaftlichere und kompatiblere Lösung darin, die Spezifikationen beim Hochladen einzuschränken, und die meisten Orte, an denen Designer Bilder anzeigen, werden beim Entwerfen der Seite von Jahr zu Jahr vergrößert oder verkleinert. Das ist meiner Meinung nach ein wirtschaftlicherer Ansatz.

Wenn Sie das Attribut bacnground-size: verwenden, ist die Abwärtskompatibilität in häuslichen Situationen nicht sehr gut, und dies führt in einigen Fällen auch zu einer Verformung und zum Verlust der Jungfräulichkeit.