Comment incliner uniquement les extrémités d'une galerie d'images à l'aide de CSS ?

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

Auparavant, une méthode permettant d'incliner un assortiment d'images avait été conçue, produisant des résultats satisfaisants . Cependant, il restait un défi : comment incliner uniquement les extrémités les plus à gauche (case1) et à l'extrême droite (box6) du conteneur tout en laissant la partie intérieure non inclinée.

Solution

Pour résoudre ce problème, une solution CSS affinée a été développée :

 --s : 50px ; /<em> contrôler la partie inclinée </em>/</p><p>affichage : grille;<br> hauteur : 350px;<br> écart : 8px;<br> grille-auto-flow : colonne;<br> place-items : center;<br>}<br>.gallery > img {<br> width: 0;<br> min-width: calc(100% var(--s));<br> height: 0;<br> min-height: 100%;<br> object- fit: cover;<br> clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> curseur : pointeur;<br> transition : .5s;<br>}<br>.gallery > img:hover {<br> largeur : 15vw ; <br>}<br>.gallery > img:first-child {<br> min-width: calc(100% var(--s)/2);<br> place-self: start;<br> clip-path: polygon(0 0,100% 0, calc(100% - var(--s)) 100%,0 100%);<br>}<br>.gallery > img:last-child {<br> min-width: calc(100% var(--s)/2);<br> place-self: end;<br> clip-path: polygon(var(--s ) 0,100% 0,100% 100%,0 100%);<br>}</p>
<p>corps {<br> marge : 0;<br> hauteur min : 100vh;<br> affichage : grille;<br> align-content : centre;<br> arrière-plan : #ECD078;<br>}

 <img src="https://picsum.photos/id/433/600/400" alt="Un ours"><br> <img src="https://picsum.photos/id/582/600/ 400" alt="Un loup"><br> <img src="https://picsum.photos/id/1074/600/400" alt="Une lionne"><br> <img src="https://picsum.photos/id/237/600/ 400" alt="Un chien"><br> <img src="https://picsum.photos/id/659/600/400" alt="Un gentil loup"><br> <img src="https://picsum.photos/id/593/600 /400" alt="A Tigre"><br></div>

Ce code définit une grille CSS avec six images. La grille est configurée avec un espace entre les images et une propriété place-items qui les centre dans les cellules de la grille. Chaque image reçoit une largeur de 0, une largeur minimale de 100 % plus la valeur de la variable --s, une hauteur de 0 et une hauteur minimale de 100 %. La propriété object-fit est définie sur cover, garantissant que les images remplissent l'espace disponible tout en conservant leurs proportions.

La propriété clip-path est utilisée pour créer la forme asymétrique. Pour chaque image, le polygone spécifie quatre points qui définissent les quatre côtés de la forme. La valeur de --s contrôle la largeur de la partie inclinée au début et à la fin du conteneur, vous permettant d'affiner son apparence.

La règle de style :hover est appliquée aux images au survol, augmentant leur largeur pour les rendre plus proéminents. Les styles :first-child et :last-child ajustent le chemin de détourage de la première et de la dernière images pour produire l'effet asymétrique souhaité sur les bords du conteneur.

Cette solution offre plusieurs avantages : elle permet conception réactive, préserve les proportions des images et permet de contrôler l'apparence de la forme inclinée.

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!