Wie kann ich die Kanten einer verzerrten Bildergalerie entzerren und gleichzeitig die mittlere Verzerrung beibehalten?

Entzerren der Enden einer Zusammenstellung mehrfach verzerrter Bilder

Zuvor wurde eine Methode untersucht, um eine Zusammenstellung von Bildern effektiv zu verzerren. Beim Versuch, die Verzerrung ganz links (Kasten 1) und ganz rechts (Kasten 6) des verzerrten Bildcontainers aufzuheben, stellte sich jedoch eine Herausforderung dar.

Hier ist eine verbesserte Lösung:

Das bereitgestellte CSS Der Code ändert effektiv die Neigung der Bilder ganz links und ganz rechts innerhalb des Containers und behält gleichzeitig das schräge Erscheinungsbild des Inneren bei Bilder.

Implementierung:

1. Erstellen Sie einen übergeordneten Container:

   • Definieren Sie einen Containerelement mit der Klasse „gallery“, das als übergeordnetes Element für das Bild dient Sammlung.

2. Skew-Variablen festlegen:

   • Initialisieren Sie eine Variable --s, die die Größe des geneigten Teils steuert .

3. Style the Galerie:

   • Verwenden Sie CSS Grid, um die Bilder in einer Reihe anzuordnen und vertikal zu zentrieren.
   • Definieren Sie die Bildbreite als 0, die Mindestbreite als calc(100% var (--s)), um die linke Neigung zu erstellen, und schneiden Sie das Bild mit einem Polygon-Clip-Pfad aus, um die gewünschte Form zu erreichen.
   • Nutzung CSS-Übergänge zum Animieren der Bilder beim Schweben.

4. Erstes und letztes Bild anpassen:

   • Passen Sie die Mindestbreite von an das erste Bild (calc(100% var(--s)/2)) und verwenden Sie place-self:start, um die Schrägstellung von links zu beginnen Rand.
   • Wiederholen Sie den Vorgang für das letzte Bild, aber platzieren Sie das Bild selbst: Ende und passen Sie den Clip-Pfad an, um die Schrägstellung am rechten Rand zu beginnen.

5. Hover-Effekt konfigurieren (optional):

   • Fügen Sie bei Bedarf CSS hinzu, um einen Hover-Effekt zu aktivieren Dadurch wird das ausgewählte Bild erweitert und ein dynamisches Galerieerlebnis geschaffen.

Vorteile:

• Diese Lösung ermöglicht die kontrollierte Verzerrung der Endbilder, ohne die inneren Bilder zu beeinträchtigen.
• Der Hover-Effekt sorgt für zusätzliche Interaktivität und visuelle Elemente Attraktivität.
• Der Code ist modular und kann leicht an spezifische Designanforderungen angepasst werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Kanten einer verzerrten Bildergalerie entzerren und gleichzeitig die mittlere Verzerrung beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!