在網(wǎng)頁(yè)設(shè)計(jì)中，輪播圖是一個(gè)很受歡迎的元素。但是，當(dāng)輪播圖中的圖片寬高比例和外層容器不一致時(shí)，會(huì)導(dǎo)致圖片溢出父容器，影響頁(yè)面布局。

這時(shí)可以使用CSS的溢出影藏屬性來(lái)解決問(wèn)題。

.container {
width: 500px;
height: 300px;
overflow: hidden; /* 溢出影藏 */
}
.img-wrapper {
position: relative;
width: 600px; /* 比容器寬 */
height: 400px; /* 比容器高 */
left: -50px; /* 負(fù)值移動(dòng) */
}

通過(guò)設(shè)置外層容器的overflow: hidden;屬性，可以將溢出部分影藏。而對(duì)于圖片容器，可以通過(guò)設(shè)置負(fù)值的left或top屬性，將圖片移動(dòng)至可視區(qū)域內(nèi)。

實(shí)際使用時(shí)，可以將輪播圖項(xiàng)目放在容器內(nèi)，再結(jié)合JavaScript實(shí)現(xiàn)自動(dòng)滑動(dòng)和手動(dòng)控制，達(dá)到更好的交互效果。