Bagaimana untuk Membongkar Tepi Galeri Imej Serong?

Membuang Hujung Pelbagai Imej Serong

Memperkenalkan Isu:

Dalam perbincangan sebelum ini, kaedah untuk menyerong susunan imej telah ditemui, yang membuahkan hasil yang memuaskan. Walau bagaimanapun, cabarannya kini terletak pada melonggarkan hujung kiri dan kanan paling jauh persekitaran bekas yang condong, hanya menyasarkan bahagian dalam imej khusus ini.

Membuang Hujung:

Untuk mencapai kesan ini, kami mempersembahkan penyelesaian yang lebih baik:

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

Pendekatan ini memastikan bahawa imej pertama dan terakhir dalam galeri akan mempunyai bahagian dalam yang condong manakala bahagian kiri dan kanan yang jauh kekal tidak condong. Pembolehubah --s membolehkan penyesuaian lanjut kawasan senget.

Atas ialah kandungan terperinci Bagaimana untuk Membongkar Tepi Galeri Imej Serong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!