CSS圖片自適應輪顯是現代網頁設計中常用的技巧之一，它能讓圖片在不同的設備和瀏覽器上自適應展示，給用戶帶來更好的視覺體驗。

<div class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
.carousel {
display: flex;
overflow: hidden;
}
.carousel img {
flex: 1;
width: 100%;
}

上面代碼中，我們創建了一個

元素，包含三個元素作為輪播圖。使用CSS Flexbox布局，將它們放置在同一行并設置"overflow:hidden"使得只顯示一個圖片。然后使用元素的"flex: 1"屬性和"width: 100%"屬性讓圖片自適應父元素的寬度。

如果想要在不同的屏幕大小下都有良好的體驗，可以結合媒體查詢使用不同的樣式：

@media (max-width: 768px) {
.carousel img {
height: auto;
max-width: 100%;
}
}

上述代碼表示當屏幕寬度小于768px時，圖片的高度自適應，并且最大寬度不超過100%。

通過這種方法，我們可以輕松實現CSS圖片自適應輪顯，為網站的視覺效果帶來提升。