CSS 可以用來裁剪圖片，使它們適合不同的容器大小。這種方法被稱為“自動裁剪”。

img {
width: 100%;
height: auto;
object-fit: cover;
}

上面的 CSS 代碼將自動將圖像縮放到其容器的大小，并使用“cover”選項自動裁剪。這意味著圖像將自適應到其容器，并且沒有空白的間隔。

使用 CSS 裁剪圖像的另一種方法是使用“object-position”屬性。這個屬性讓你指定圖像是在其容器的上部、下部、左邊、右邊還是中心位置。下面的示例將圖像放置在容器的上部，同時自動裁剪它：

img {
width: 100%;
height: auto;
object-fit: cover;
object-position: top;
}

需要注意的是，這個方法不是所有瀏覽器都支持，對于一些老舊的瀏覽器可能會出問題。為了確保最大的兼容性，最好使用第一個示例，使用“cover”選項進行自動裁剪。