歪んだ画像ギャラリーの端を歪ませる方法

傾いた画像の組み合わせの端の傾きを戻す

問題の紹介:

前の説明では、傾きを補正する方法について説明しました。画像の配置が発見され、満足のいく結果が得られました。ただし、ここでの課題は、これらの特定の画像の内側部分のみをターゲットにして、歪んだコンテナ環境の左端と右端の歪みを直すことにあります。

端の歪みを直す:

この効果を達成するために、改善されたソリューションを紹介します:

<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 中国語 Web サイトの他の関連記事を参照してください。