在網頁設計過程中，我們經常會遇到需要在一個限定區域內顯示超過寬度或高度的圖片的情況。使用 CSS 的溢出圖可以幫助我們實現這個目標。

/* 定義一個容器 */
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
/* 定義圖片 */
.img {
width: 500px;
height: 400px;
}

如上述代碼所示，我們首先定義了一個容器，將其寬度設置為 300 像素，高度設置為 200 像素，再將溢出隱藏。接著，我們定義一張圖片，將它的寬度設置為 500 像素，高度設置為 400 像素。

但是，圖片的寬度和高度都大于容器的限制，因此需要使用溢出圖來控制圖片的顯示。利用下面的 CSS 代碼來實現：

/* 使用相對定位 */
.img {
position: relative;
left: -100px;
top: -100px;
}

如上述代碼所示，我們在圖片的類中設置了相對定位，并將其向左移動了 100 像素，向上移動了 100 像素。這樣，圖片就會先顯示在容器的左上角，然后根據設置的相對位置進行偏移。

使用 CSS 溢出圖可以幫助我們在設計網頁時精確控制圖片的顯示效果，確保圖片不會超出指定的容器范圍，同時保持整個頁面的美觀和協調。