CSS自適應(yīng)寬度圖片輪播是很常用的網(wǎng)頁設(shè)計元素，下面是一份簡單的樣例代碼。

<div id="slider-wrap">
<ul id="slider">
<li><img src="1.jpg" alt="圖片1"></li>
<li><img src="2.jpg" alt="圖片2"></li>
<li><img src="3.jpg" alt="圖片3"></li>
</ul>
</div>

上述代碼使用了一個div容器包裹列表元素ul，以便進(jìn)行樣式控制。每個列表項（li）都包含一個圖像元素。

以下是CSS代碼部分來實現(xiàn)輪播動畫和自適應(yīng)寬度布局。

#slider-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 300px;
}
#slider {
position: absolute;
width: 300%;
height: 100%;
left: -100%;
list-style-type: none;
margin: 0;
padding: 0;
animation: slide 10s infinite;
}
#slider li {
float: left;
width: 33.33333%;
height: 100%;
text-align: center;
}
#slider li img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
@keyframes slide {
0% {
left: -100%;
}
12.5% {
left: -100%;
}
25% {
left: -200%;
}
37.5% {
left: -200%;
}
50% {
left: -300%;
}
62.5% {
left: -300%;
}
75% {
left: -200%;
}
87.5% {
left: -200%;
}
100% {
left: -100%;
}
}

上面代碼設(shè)置了一個相對位置容器，并將其子項絕對定位。列表項使用CSS中的浮動屬性來適應(yīng)容器的大小，并且圖像元素使用max-width和max-heigt來確保圖像按比例縮放。

最后，設(shè)定了一個CSS動畫來實現(xiàn)輪播效果。通過修改容器的左側(cè)位置相對于相對位置容器的位置，使用CSS動畫會讓列表項平移，并且從意想不到的方向回到屏幕中央。