在網(wǎng)頁(yè)中，有時(shí)候我們需要在頁(yè)面中居中顯示一張圖片，但是如果圖片大小超過(guò)了父元素的大小，那么我們就需要使用CSS來(lái)控制超出部分的隱藏。下面是一些示例代碼。

/* 設(shè)置父元素為相對(duì)定位 */
.parent {
position: relative;
}
/* 設(shè)置圖片為絕對(duì)定位，并且居中顯示 */
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 設(shè)置圖片最大寬度為父元素的寬度，同時(shí)高度設(shè)為自動(dòng)，防止圖片變形 */
max-width: 100%;
height: auto;
/* 超出部分隱藏 */
overflow: hidden;
}

上述代碼中，我們首先將父元素設(shè)置為相對(duì)定位，這樣子元素的絕對(duì)定位就會(huì)相對(duì)于這個(gè)父元素進(jìn)行定位。然后，我們將圖片設(shè)置為絕對(duì)定位，同時(shí)使用transform屬性將其居中。接著，我們?cè)O(shè)置圖片的最大寬度為父元素的寬度，同時(shí)將高度設(shè)為自動(dòng)，防止圖片變形。最后，我們使用overflow屬性來(lái)控制超出的部分隱藏。

在實(shí)際使用中，我們只需要將圖片元素放在父元素中即可，例如：

<div class="parent">
<img src="example.jpg" alt="example" class="img">
</div>

通過(guò)上述代碼，我們就可以在頁(yè)面中居中顯示一張圖片，并將超出的部分隱藏起來(lái)。這樣子可以使得頁(yè)面更加美觀，防止出現(xiàn)不必要的滾動(dòng)條。