如何使用 CSS 僅傾斜圖像庫的末端？

矯正多個傾斜影像分類的末端

之前，設計了一種傾斜各種影像的方法，產生了令人滿意的結果。然而，仍有一個挑戰：如何僅傾斜容器的最左端 (box1) 和最右端 (box6)，同時保持內部部分不傾斜。

解決方案

為了解決這個問題，開發了一個完善的CSS 解決方案：

 --s: 50px; /<em>控制傾斜部分</em>/<p>display: grid;<br>高度:350px;<br>間隙:8px;<br>grid-auto-flow:column<br>地點項目：center;<br>}<br>.gallery > img {<br> 寬度: 0;<br> 最小寬度: calc(100% var(--s));<br> 高度: 0;<br> 最小高度: 100%;<br> 物件-適合: 覆蓋;<br> 剪輯路徑: 多邊形(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> 遊​​標: 指針;<br> 過渡: .5s;<br>}<br>.gallery > img:hover {<br> 寬度: 15vw ; <br>}<br>.畫廊> img:first-child {<br> 最小寬度: calc(100% var(--s)/2);<br> place-self: start;<br> 剪輯路徑: 多邊形(0 0,100% 0, calc(100% - var( --s)) 100%,0 100%);<br>}<br>.畫廊> img:last-child {<br> 最小寬度: calc(100% var(--s)/2);<br> place-self: end;<br> 剪輯路徑: 多邊形(var(--s) ) 0,100% 0,100% 100%,0 100%);<br>}</p><p>身體{<br> 邊距：0;<br> 最小高度：100vh;<br>顯示：網格；<br>對齊內容：中心；<br> 背景：#ECD078；<br>}</p>

;

<img src="https://picsum.photos/id/433/600/400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br> <img src="https://picsum.photos/id/582/600/%20400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br> <img src="https://picsum.photos/id/1074/600/400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br> <img src="https://picsum.photos/id/237/600/%20400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br> <img src="https:/%20/picsum.photos/id/659/600/400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br> <img src="https://picsum.photos/id/593/600%20/400" alt="如何使用 CSS 僅傾斜圖像庫的末端？"><br>

此程式碼定義了一個包含六個圖片的 CSS 網格。網格配置了影像之間的間隙和將影像置於網格單元中心的放置項​​目屬性。每個影像的寬度為 0，最小寬度為 100% 加上變數 --s 的值，高度為 0，最小高度為 100%。 object-fit 屬性設定為 cover，確保影像填滿可用空間，同時保持其縱橫比。

clip-path 屬性用於建立傾斜形狀。對於每個影像，多邊形指定定義形狀的四個邊的四個點。 --s 的值控制容器開頭和結尾處傾斜部分的寬度，讓您可以微調其外觀。

:hover 樣式規則套用於懸停時的圖像，增加它們的寬度使它們更加突出。 :first-child 和 :last-child 樣式調整第一個和最後一個影像的剪輯路徑，以在容器邊緣產生所需的傾斜效果。

此解決方案有幾個優點：它允許響應式設計，保留影像的縱橫比，並提供對傾斜形狀外觀的控制。

以上是如何使用 CSS 僅傾斜圖像庫的末端？的詳細內容。更多資訊請關注PHP中文網其他相關文章！