CSS自動略縮圖是前端開發中非常實用的技巧之一。在網頁設計中，我們需要使用很多圖片來豐富頁面內容，但一些大型圖片可能會拖慢頁面的加載速度，從而造成用戶的流失。因此，在保證視覺效果不變的情況下，通常通過一些技巧來縮小圖片的大小，其中之一就是使用CSS自動略縮圖。

使用CSS自動略縮圖，首先需要了解object-fit屬性。這個CSS屬性可以控制圖片如何適應其包含框。常用的取值有fill、contain、cover、scale-down，其中scale-down可以在圖片本身比包含框小的情況下進行縮放，而另外三種取值則是保持圖片比例進行填充。例如，使用contain時，圖片將被放大或縮小以適應其父容器并保持其原始比例。

img {
width: 200px;
height: 200px;
object-fit: contain;
}

上述代碼將會將圖片大小限制為200x200，同時使用contain屬性進行自動略縮圖。如果圖片大小超過了容器的尺寸，那么圖片將會被縮小以適應它的包含框。

除了object-fit屬性，還有一種常見的自動略縮圖技巧是使用background-image屬性，通過設置背景圖像的大小和位置來達到縮小圖片的效果。

.thumbnail {
width: 200px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}

上述代碼將會將圖片作為背景，并使用cover屬性進行自動略縮圖。可以發現，使用這種方式可以很容易地實現一些高度自定義的效果。

總的來說，CSS自動略縮圖是一種非常實用的技巧，可以幫助我們在保證視覺效果的同時避免過大的圖片占用帶寬，提高網頁的加載速度和用戶體驗。