Comment redresser les bords d'une galerie d'images asymétriques ?

Désincliner les extrémités des assortiments d'images asymétriques

Présentation du problème :

Dans une discussion précédente, une méthode d'inclinaison un agencement d'images a été découvert, qui a donné des résultats satisfaisants. Cependant, le défi consiste désormais à redresser les extrémités gauche et droite de l'environnement du conteneur asymétrique, en ciblant uniquement les parties intérieures de ces images spécifiques.

Désincliner les extrémités :

Pour obtenir cet effet, nous présentons une solution améliorée :

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  ...
  <img src="imageN.jpg" alt="Image N">
</div>

.gallery {
  --s: 50px; /* Control the skewed portion */

  display: grid;
  height: 350px;
  gap: 8px;
  grid-auto-flow: column;
  place-items: center;
}

.gallery > img {
  width: 0;
  min-width: calc(100% + var(--s));
  height: 0;
  min-height: 100%;
  object-fit: cover;
  clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
  cursor: pointer;
  transition: .5s;
}

.gallery > img:hover {
  width: 15vw;
}

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}

.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

Cette approche garantit que le premier et le dernier les images de la galerie auront une partie intérieure inclinée tandis que les côtés les plus à gauche et à droite resteront inchangés. La variable --s permet une personnalisation plus poussée de la zone asymétrique.

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!