CSS圖片自動(dòng)縮放動(dòng)畫是一種常用的網(wǎng)頁(yè)設(shè)計(jì)效果，它可以根據(jù)頁(yè)面大小自動(dòng)調(diào)整圖片大小，實(shí)現(xiàn)動(dòng)態(tài)收縮的效果。要實(shí)現(xiàn)這種動(dòng)畫效果，我們可以借助CSS的transition屬性來(lái)實(shí)現(xiàn)。在下面的代碼示例中，我們將展示如何使用transition屬性來(lái)實(shí)現(xiàn)CSS圖片自動(dòng)縮放動(dòng)畫。

/* 設(shè)置圖片樣式 */
img {
width: 100%;
height: auto;
transition: all 0.3s ease-in-out;
}
/* 鼠標(biāo)懸停時(shí)縮放圖片 */
img:hover {
transform: scale(0.9);
}

上面的代碼中，我們首先對(duì)圖片元素設(shè)置寬度為100%、高度自適應(yīng)，并且指定了一個(gè)過(guò)渡（transition）效果，當(dāng)圖片尺寸發(fā)生變化時(shí)，動(dòng)畫持續(xù)時(shí)間為0.3秒，并且使用緩入緩出的效果（ease-in-out）。

接下來(lái)，我們使用:hover偽類選擇器來(lái)指定鼠標(biāo)懸停時(shí)的樣式表，使用transform屬性的scale值來(lái)指定圖片縮放的比例，并將縮放比例設(shè)置為0.9，這樣就可以實(shí)現(xiàn)圖片自動(dòng)縮放動(dòng)畫效果。

需要注意的是，如果要讓圖片等比例縮放，可以將高度設(shè)置為自適應(yīng)，這樣就可以在寬度變化時(shí)自動(dòng)調(diào)整高度，實(shí)現(xiàn)等比例縮放的效果。另外，我們也可以在transition屬性中指定縮放效果的具體方向，例如設(shè)置為transition: transform 0.3s ease-in-out，這樣就只會(huì)在縮放時(shí)產(chǎn)生過(guò)渡效果。

總之，CSS圖片自動(dòng)縮放動(dòng)畫是一種非常實(shí)用的網(wǎng)頁(yè)設(shè)計(jì)效果，可以為網(wǎng)頁(yè)增添動(dòng)態(tài)和美感，也可以提高用戶體驗(yàn)。通過(guò)使用transition屬性和transform屬性，我們可以非常輕松地實(shí)現(xiàn)這種效果。