前端開發中，輪播圖是一個常見的組件，可以為網站增加一定的美觀度，提升用戶體驗。在制作輪播圖時，我們通常會使用CSS來設置圖片輪播效果，同時實現自適應、自動播放等功能。

下面，我們就來介紹一下如何使用CSS制作自適應自動播放的輪播圖。

HTML結構如下：
<div class='slide-container'>
<div class='slides'>
</div>
</div>
CSS樣式如下：
.slide-container {
width: 100%;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 300%;
animation: slide 10s infinite;
}
.slides img {
width: 33.333%;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
33.333% {
transform: translateX(0%);
}
66.666% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}

上述代碼中，使用flex布局將輪播圖中的圖片橫向排列，設置圖片的寬度為33.333%實現自適應。通過CSS3動畫實現自動播放，通過translateX()函數控制圖片的運動方向和距離。

這樣，我們就可以輕松實現一個自適應自動播放的輪播圖，不僅美觀、實用，而且使用簡單易懂的CSS代碼實現，是前端開發的必備技能之一。