如何使用 CSS 自動將圖像裁剪並居中至特定的正方形尺寸？

自動圖像裁剪和居中

處理不同尺寸的圖像時，需要在特定範圍內自動裁剪和居中它們正方形維度出現。與以前依賴已知影像大小的方法不同，需要更強大的解決方案。

一種有效的方法是利用背景影像。將影像集中在尺寸為所需裁剪尺寸的元素內，我們可以獲得所需的結果。

實作範例

這個基本範例示範了這個方法：

寬度：100px;<br>高度： 100px;<br>背景位置：中心中心;<br>背景重複：無重複;<br>}

<pre class="brush:php;toolbar:false">&gt;

在此範例中， “.center-cropped”類別定義了一個正方形尺寸為100 像素的元素。背景圖片URL指向尺寸較大的佔位圖。此樣式可確保影像在元素內居中，從而產生經過裁切且居中的方形影像。

以上是如何使用 CSS 自動將圖像裁剪並居中至特定的正方形尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！