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

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

Mary-Kate Olsen

Freigeben： 2024-12-10 17:49:11

Original

577 Leute haben es durchsucht

How to Skew Only the Ends of Images in a CSS Grid Container?

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;

Nach dem Login kopieren

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!