Wie kann man nur die Enden von Bildern in einem CSS-Grid-Container verzerren?

Entzerren der Enden einer Zusammenstellung mehrerer verzerrter Bilder

In einer früheren Frage wurde eine Lösung gefunden, um eine Zusammenstellung von Bildern zu verzerren. Während der Code die Größenänderung jedes Bildes ermöglichte, lieferte er nicht den gewünschten Effekt, die Felder ganz links und ganz rechts ausschließlich im inneren Teil des Containers zu verzerren.

Um dies zu erreichen, wurde eine verfeinerte Lösung benötigt wurde erstellt, wie ein auf CSS-Tricks veröffentlichter Artikel zeigt. Diese Methode ermöglicht das Hinzufügen von Hover-Effekten und Lücken zwischen den Bildern.

Der neue Code

.gallery {
  --s: 50px; /* control the slanted part */  
  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%);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #ECD078;

Das obige ist der detaillierte Inhalt vonWie kann man nur die Enden von Bildern in einem CSS-Grid-Container verzerren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!