CSS中圖片的裁剪和等比縮放是非常常見的操作，該操作不會影響原始圖片的尺寸和質量，同時也能夠使頁面元素更美觀。下面我們來介紹一下如何實現圖片的裁剪和等比縮放。 首先我們來看一下圖片的裁剪。使用CSS屬性"background-position"可以實現圖片的裁剪操作。其中，屬性值使用x軸和y軸來描述裁剪后裁剪框相對于裁剪對象的偏移位置。我們先看一下CSS代碼：

.image {
width: 200px;
height: 200px;
background-image: url("image.jpg");
background-size: cover;
background-position: -50px -70px;
}

上述代碼中，我們定義了一個帶有背景圖像的div元素，寬度和高度分別為200px，并且使用"background-size"屬性對背景圖像進行了封面式的縮放，最后我們使用"background-position"屬性將背景圖像沿x軸和y軸分別向左偏移50px和向上偏移70px。這樣就實現了對背景圖像進行裁剪的效果。 接下來我們來看一下圖片的等比縮放。使用CSS屬性"object-fit"可以實現圖片的等比縮放，同時保持其尺寸與縱橫比不變。我們先看一下CSS代碼：

.image {
width: 200px;
height: 200px;
object-fit: cover;
}

上述代碼中，我們同樣定義了一個帶有背景圖像的div元素，寬度和高度分別為200px，同時使用"object-fit"屬性設置圖片填充方式為"cover"，這種填充方式會等比縮放圖片，使其充滿所有可用空間，并保持縱橫比不變。這樣就可以實現對圖片的等比縮放效果。 綜上所述，我們可以使用CSS屬性來實現圖片的裁剪和等比縮放，不僅可以使頁面元素更加美觀，同時也能夠保持圖片原始的尺寸和質量。