CSS自適應圖片輪播是現代網站常用的一個功能，它可以讓頁面更加美觀、動畫更加自然。下面我們來介紹如何實現一個CSS自適應圖片輪播。

HTML代碼:
<div class="slider">
<img src="image1.jpg" alt="slide1">
<img src="image2.jpg" alt="slide2">
<img src="image3.jpg" alt="slide3">
</div>
CSS代碼:
.slider {
position: relative;
width: 100%;
height: 400px;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slider img:first-child {
opacity: 1;
}
.slider input {
display: none;
}
.slider input:checked+img {
opacity: 1;
}
.slider .slides {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider .slides label {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.slider .slides label:hover {
background-color: #666;
}

首先我們需要容器元素，這里使用了一個class名為slider的div，然后在里面加入了三張圖片。CSS中給容器元素設置了寬度和高度，使其在頁面中適當顯示。同時，也將容器元素的position屬性設置為relative，以便后面的absolute布局。

接著給每張圖片設置了寬度和高度為100%并使用了object-fit和object-position屬性，以便將圖片放到容器元素中并縮放到合適的大小。另外也設置了每張圖片的position屬性，讓他們能夠在容器元素中絕對定位。opacity屬性用于增加輪播效果，使每張圖片在1s內漸隱漸現。類名為slider的元素的第一個子元素的opacity屬性被設置為1，從而默認顯示第一張圖片。

使用input元素來創建radio按鈕組，并將其display屬性設置為none，從而隱藏它。選中某個radio按鈕后，使用+選擇器選中緊隨其后的img元素，從而實現輪播的切換。最后使用CSS絕對定位方式把radio按鈕組放到容器元素的下方中心位置。

在上面這個例子中，我們使用了CSS3屬性object-fit、object-position和transition來實現自適應圖片輪播，使整個效果看起來更加自然和美觀。使用上述的HTML和CSS代碼，可以在您的網站中添加一個自適應圖片輪播效果，讓用戶更好地了解您的產品或服務。