CSS層疊（Cascade）是CSS的一項重要特性，它允許在多個樣式中使用相同的屬性，最終通過層疊算法來確定最終的樣式效果。其中一個常見的問題就是如何調整圖片大小，并且在不同的樣式中層疊展示。

// HTML中的圖片
<img src="example.jpg" alt="example">
// CSS樣式
img {
width: 100px;
height: 100px;
border: 1px solid black;
}
// 使用CSS層疊為圖片添加陰影
img {
box-shadow: 2px 2px 5px grey;
}
// 改變圖片大小
img {
width: 50px;
height: 50px;
}
// 同時使用層疊和縮放圖片
img {
width: 50px;
height: 50px;
box-shadow: 2px 2px 5px grey;
}
img:hover {
transform: scale(2);
box-shadow: none;
}

上面的代碼段演示了如何使用CSS層疊來調整圖片大小，并且在不同的樣式中進行層疊展示。首先，在CSS樣式中，我們對圖片添加了一些基礎的樣式屬性，包括寬度、高度、邊框等。然后，我們使用CSS層疊為圖片添加了陰影效果。

接著，我們調整了圖片的大小，將寬度和高度分別調整到了50px。注意這里我們并沒有改變陰影效果，因為在CSS層疊中，它會覆蓋基礎樣式中的屬性，因此陰影效果仍然保持不變。

最后，我們展示了如何同時使用層疊和縮放圖片。當鼠標懸停在圖片上時，我們使用transform屬性將圖片的大小放大了2倍，并且移除了陰影效果。在這種情況下，一旦鼠標移走，圖片將恢復到原始大小并且重新顯示陰影效果。