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

自動居中和裁剪圖像

通常，需要裁剪和居中圖像以適合特定的正方形尺寸，而無需圖像尺寸的先驗知識。這可以透過利用 CSS 背景圖像屬性來實現。

透過動態裁切將影像置中

要動態居中和裁切影像，請依照下列步驟操作：

1. 定義一個具有特定寬度和高度的HTML 元素，代表所需的裁切尺寸。
2. 使用background-image屬性設定圖片URL。
3. 使用background-position: center center將圖片置中對齊。
4. 防止圖片居中透過設定background-repeat: no-repeat來避免重複;.

範例程式碼：

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped">

範例程式碼：

範例程式碼：範例程式碼：範例程式碼：範例程式碼：範例程式碼：範例程式碼： 透過使用此技術，影像將自動居中並在定義的尺寸內裁剪，無論其原始大小如何。

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