如何消除倾斜图库的边缘？

消除倾斜图像分类的末端

介绍问题：

在之前的讨论中，一种倾斜的方法发现了图像的排列，并产生了令人满意的结果。然而，现在的挑战在于消除倾斜容器环境的最左端和最右端的倾斜，仅针对这些特定图像的内部部分。

消除两端的倾斜：

为了达到这个效果，我们提出了一个改进的解决方案：

<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中文网其他相关文章！