Wie entzerrt man die Ränder einer verzerrten Bildergalerie?

Entzerren der Enden verzerrter Bildsortimente

Einführung in das Problem:

In einer früheren Diskussion eine Methode zum Verzerren Es wurde eine Anordnung von Bildern entdeckt, die zufriedenstellende Ergebnisse lieferte. Die Herausforderung besteht nun jedoch darin, die äußersten linken und rechten Enden der verzerrten Containerumgebung aufzuheben und nur auf die inneren Teile dieser spezifischen Bilder abzuzielen.

Die Enden aufheben:

Um diesen Effekt zu erzielen, stellen wir eine verbesserte Lösung vor:

<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%);
}

Dieser Ansatz stellt sicher, dass das erste und letzte Bild in der Galerie einen schrägen inneren Teil haben, während die äußerste linke und rechte Seite unverzerrt bleiben. Die Variable --s ermöglicht eine weitere Anpassung des geneigten Bereichs.

Das obige ist der detaillierte Inhalt vonWie entzerrt man die Ränder einer verzerrten Bildergalerie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!