CSS 自動裁剪圖片功能是在網(wǎng)頁設(shè)計開發(fā)中經(jīng)常使用的。借助 CSS，我們可以對圖片進(jìn)行有效裁剪，使其適應(yīng)不同尺寸的頁面，同時不會改變圖片的比例。

img {
max-width: 100%;
height: auto;
}

在上面的代碼中，圖片所在的 img 標(biāo)簽中使用了 max-width: 100% 這個樣式屬性。這個屬性的作用是讓圖片的寬度適應(yīng)其所在容器的尺寸。同時，由于設(shè)置了 height: auto 屬性，圖片的高度會自適應(yīng)其寬度，從而在不改變圖片比例的前提下，實(shí)現(xiàn)了自動裁剪的效果。

在實(shí)際開發(fā)中，我們通常需要使用多種尺寸的圖片來適應(yīng)不同的頁面需求。這時候，我們可以借助 CSS 的媒體查詢功能，根據(jù)不同的設(shè)備尺寸用不同的圖片：

/* 默認(rèn)使用大尺寸圖片 */
.my-image {
background-image: url('big-image.jpg');
}
/* 在小屏幕設(shè)備上使用小尺寸圖片 */
@media screen and (max-width: 768px) {
.my-image {
background-image: url('small-image.jpg');
}
}

在上面的代碼中，我們先給 .my-image 這個容器設(shè)置了一個默認(rèn)的大尺寸圖片。接著，使用 CSS 的媒體查詢功能，當(dāng)設(shè)備尺寸小于 768 像素時，會重新指定 .my-image 的背景圖片為小尺寸圖片。

通過使用 CSS 自動裁剪圖片功能以及媒體查詢功能，我們可以輕松的實(shí)現(xiàn)圖片在不同尺寸頁面中的自適應(yīng)裁剪。這不僅可以提升網(wǎng)頁的美觀度，也能優(yōu)化用戶體驗，給用戶更好的瀏覽效果。