Comment puis-je redresser les bords d'une galerie d'images inclinées tout en conservant l'inclinaison centrale ?

Désincliner les extrémités d'un assortiment de plusieurs images asymétriques

Auparavant, une méthode a été explorée pour incliner efficacement un assortiment d'images. Cependant, un défi est apparu en tentant de corriger l'inclinaison des extrémités les plus à gauche (box1) et à l'extrême droite (box6) du conteneur d'images asymétriques.

Voici une solution améliorée :

Le CSS fourni le code modifie efficacement l'inclinaison des images les plus à gauche et à l'extrême droite dans le conteneur, tout en préservant l'apparence asymétrique de l'intérieur. images.

Mise en œuvre :

1. Créer un conteneur parent :

   • Définir un élément conteneur avec la classe "gallery" qui sert de parent à l'image collection.

2. Définir les variables d'inclinaison :

   • Initialiser une variable --s qui contrôle la taille de la partie inclinée .

3. Stylez le Galerie :

   • Utilisez la grille CSS pour organiser les images dans une rangée et les centrer verticalement.
   • Définissez la largeur de l'image sur 0, la largeur minimale sur calc(100% var (--s)) pour créer l'inclinaison gauche et découper l'image à l'aide d'un chemin de détourage polygonal pour obtenir la forme souhaitée.
   • Exploitez CSS transitions pour animer les images en survol.

4. Ajuster la première et la dernière images :

   • Ajuster la largeur minimale du première image (calc(100% var(--s)/2)) et utilisez place-self : start pour démarrer l'inclinaison à partir de la gauche bord.
   • Répétez le processus pour la dernière image, mais placez-vous : terminez et ajustez le chemin du clip pour commencer l'inclinaison à partir du bord droit.

5. Configurer l'effet de survol (facultatif) :

   • Si vous le souhaitez, ajoutez du CSS pour activer un effet de survol qui agrandit l'image sélectionnée, créant une expérience de galerie dynamique.

Avantages :

• Cette solution permet le contrôle inclinaison des images finales sans affecter les images intérieures.
• L'effet de survol offre une interactivité et un visuel supplémentaires attrait.
• Le code est modulaire et peut être facilement personnalisé pour répondre à des exigences de conception spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!