Wie kann man mithilfe von CSS nur die Enden einer Bildergalerie verzerren?

Entzerren der Enden einer Zusammenstellung mehrfach verzerrter Bilder

Zuvor wurde eine Methode zur Verzerrung einer Zusammenstellung von Bildern entwickelt, die zufriedenstellende Ergebnisse lieferte . Es blieb jedoch eine Herausforderung: Wie kann man nur das ganz linke (Kasten 1) und das ganz rechte (Kasten 6) Ende des Behälters schräg stellen, während der innere Teil unverzerrt bleibt.

Lösung

Um dieses Problem anzugehen, wurde eine verfeinerte CSS-Lösung entwickelt:

 --s: 50px; /<em> den schrägen Teil steuern </em>/<p>Anzeige: Raster;<br> Höhe: 350 Pixel;<br> Lücke: 8 Pixel;<br> Raster-Auto-Fluss: Spalte;<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> Cursor: Zeiger;<br> Übergang: .5s;<br>}<br>.gallery > img:hover {<br> width: 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>Körper {<br> margin: 0;<br> min-height: 100vh;<br> display: grid;<br> align-content: center;<br> background: #ECD078;<br>}</p>

 <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/433/600/400" class="lazy" alt="Ein Bär"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/1074/600/400" class="lazy" alt="Ein Wolf"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/1074/600/400" class="lazy" alt="Eine Löwin"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/237/600/400" class="lazy" alt="Ein Hund"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/593/600/400" class="lazy" alt="Ein freundlicher Wolf"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/593/600/400" class="lazy" alt="Ein Tiger"><br>

Dieser Code definiert ein CSS-Raster mit sechs Bildern. Das Raster ist mit einer Lücke zwischen den Bildern und einer Place-Items-Eigenschaft konfiguriert, die sie innerhalb der Rasterzellen zentriert. Jedes Bild erhält eine Breite von 0, eine Mindestbreite von 100 % plus den Wert der Variablen --s, eine Höhe von 0 und eine Mindesthöhe von 100 %. Die Eigenschaft „Objektanpassung“ ist auf „Abdecken“ eingestellt, um sicherzustellen, dass die Bilder den verfügbaren Raum ausfüllen und gleichzeitig ihre Seitenverhältnisse beibehalten.

Die Eigenschaft „Clip-Pfad“ wird verwendet, um die geneigte Form zu erstellen. Für jedes Bild gibt das Polygon vier Punkte an, die die vier Seiten der Form definieren. Der Wert von --s steuert die Breite des schrägen Teils am Anfang und Ende des Containers und ermöglicht Ihnen so die Feinabstimmung seines Erscheinungsbilds.

Die :hover-Stilregel wird auf Bilder beim Schweben angewendet und vergrößert sich ihre Breite, um sie hervorzuheben. Die Stile :first-child und :last-child passen den Beschneidungspfad des ersten und letzten Bildes an, um den gewünschten Schrägeffekt an den Rändern des Containers zu erzeugen.

Diese Lösung bietet mehrere Vorteile: Sie ermöglicht Responsive Design, behält das Seitenverhältnis der Bilder bei und bietet Kontrolle über das Erscheinungsbild der verzerrten Form.

Das obige ist der detaillierte Inhalt vonWie kann man mithilfe von CSS nur die Enden einer Bildergalerie verzerren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!