CSS作為前端開發中的一個重要技術，可以使網頁的樣式更加美觀優雅。其中，圖片輪播和自適應顯示是常用的特效，下面就來介紹一下它們的實現方式。

/* CSS代碼：圖片輪播 */
.carousel {
display: flex;
overflow: hidden;
width: 600px;
height: 400px;
}
.carousel img {
width: 100%;
height: 100%;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 25px;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 20px;
}
.carousel .next {
right: 10px;
}
.carousel .prev {
left: 10px;
}
/* JS代碼：圖片輪播 */
var carousel = document.querySelector('.carousel');
var imgs = carousel.querySelectorAll('img');
var len = imgs.length;
var index = 0;
var timer = null;
function carouselPlay() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
carousel.style.transform = 'translateX(-' + (index * 600) + 'px)';
}, 2000);
}
carouselPlay();
carousel.onmouseover = function() {
clearInterval(timer);
};
carousel.onmouseout = function() {
carouselPlay();
};

如上所示，使用flex布局實現圖片的輪播，結合JS通過translateX屬性實現移動效果，并通過定時器控制圖片的自動播放。在CSS中，可根據實際需要設置輪播容器和圖片的大小，并使用絕對定位加上背景顏色等樣式美化左右箭頭。

/* CSS代碼：自適應圖片顯示 */
.img-container {
position: relative;
width: 80%;
height: 0;
padding-bottom: 60%;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

如上所示，通過設置padding-bottom的值為容器寬度的百分比（比如60%），來實現容器高度為容器寬度的60%。同時設置圖片為絕對定位，并設置寬高為100%，使用object-fit屬性來保持其長寬比并使其鋪滿整個容器。這樣，無論圖片的大小和比例，都可以在容器中自適應地顯示。