如何消除傾斜圖庫的邊緣？

消除傾斜影像分類的末端

介紹問題：

在先前的討論中，一種傾斜的方法發現了圖像的排列，並產生了令人滿意的結果。然而，現在的挑戰在於消除傾斜容器環境的最左端和最右端的傾斜，僅針對這些特定影像的內部部分。

消除兩端的傾斜：

為了達到這個效果，我們提出了一個改進的解決方案：

<div class="gallery">
  <img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1">
  <img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2">
  <img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Image 3">
  ...
  <img src="/static/imghwm/default1.png" data-src="imageN.jpg" class="lazy" 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%);
}

這種方法可確保圖庫中的第一張和最後一張影像的內部部分傾斜，而最左側和右側保持不傾斜。 --s 變數允許進一步自訂傾斜區域。

以上是如何消除傾斜圖庫的邊緣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！