如何使用CSS自動裁切和居中影像？

自動影像裁剪和居中

確保影像在特定區域內完美居中和裁剪可能是一項挑戰，尤其是當影像大小未知。本題探討了一種使用 CSS 自動裁切和居中圖像的技術。

背景圖像和居中

解決方案涉及在大小匹配的元素中使用背景圖像所需的裁剪尺寸。透過將背景位置設定為 center center，影像將位於元素的中央。

基本範例

在此程式碼片段中，.center-cropped 類別定義寬度和高度均為 100 像素的元素。 background-image 屬性分配圖像 URL，background-position 屬性使圖像在元素內居中。

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

<div class="center-cropped">

此方法允許在預先定義的正方形內自動裁剪影像並將其居中區域，確保各種影像尺寸的視覺呈現一致。

以上是如何使用CSS自動裁切和居中影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！