在網頁設計中，Banner是網頁中最為重要的部分之一。Banner的大小和顯示效果直接影響著網頁的視覺效果和用戶體驗。有時候，我們需要改變Banner的尺寸以適應不同的設備屏幕大小和分辨率。那么，如何使用CSS來改變Banner的尺寸呢？

.banner{
width: 100%;
height: 500px;
background: url(banner.jpg) no-repeat center;
background-size: cover;
}
@media screen and (max-width: 768px){
.banner{
height: 300px;
}
}
@media screen and (max-width: 480px){
.banner{
height: 200px;
background-position: center top;
}
}

以上是一個簡單的Banner尺寸改變代碼示例。首先，在banner類的CSS中定義了Banner的寬度為100%、高度為500px，背景圖片為banner.jpg，背景位置居中且充滿整個Banner區域。接著，在@media查詢中，當屏幕寬度小于768px時，將Banner高度縮小至300px。在屏幕寬度小于480px時，將Banner高度再次縮小至200px，并將背景圖片位置調整至中上方。

這個示例只是展示了Banner尺寸改變的基本過程。在實際應用中，我們還需要根據網頁的具體情況，使用更加專業的CSS技巧和自適應布局方案，來確保Banner的尺寸和顯示效果能夠適應多種設備和分辨率。