기울어진 이미지 갤러리의 가장자리를 푸는 방법은 무엇입니까?

비뚤어진 이미지 분류의 끝을 풀기

문제 소개:

이전 토론에서 기울어지는 방법 이미지 배열이 발견되어 만족스러운 결과를 얻었습니다. 그러나 이제 문제는 이러한 특정 이미지의 내부 부분만을 대상으로 왜곡된 컨테이너 환경의 왼쪽과 오른쪽 끝을 풀는 것입니다.

끝 풀기:

이 효과를 달성하기 위해 우리는 향상된 솔루션을 제시합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!