在網(wǎng)頁設(shè)計(jì)中，經(jīng)常會(huì)用到圖片來豐富頁面內(nèi)容。有時(shí)候，我們希望能夠讓圖片在鼠標(biāo)懸停時(shí)放大，但又不想讓圖片溢出父級(jí)容器。這時(shí)候，我們可以使用CSS來解決這個(gè)問題。 首先，我們需要給圖片的父級(jí)容器設(shè)置一個(gè)寬度和高度，并將其設(shè)置為相對(duì)定位。接著，我們需要給圖片設(shè)置絕對(duì)定位，并將其寬度和高度設(shè)置為100%。這樣，圖片就會(huì)填充整個(gè)父級(jí)容器。 下一步，我們需要使用CSS過渡效果來實(shí)現(xiàn)圖片放大的效果。我們可以給圖片設(shè)置一個(gè)初始的縮放比例，然后在鼠標(biāo)懸停時(shí)將縮放比例增加到我們希望的值。同時(shí)，我們需要給過渡效果設(shè)置一個(gè)合適的持續(xù)時(shí)間，使動(dòng)畫看起來更加自然。 最后，為了防止圖片溢出父級(jí)容器，我們可以給父級(jí)容器設(shè)置overflow:hidden屬性。這樣，圖片放大時(shí)就不會(huì)超出容器的邊界了。 下面是一個(gè)示例代碼，可以實(shí)現(xiàn)圖片放大不溢出的效果：

<style>
.image-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.3s ease;
transform-origin: center center;
transform: scale(1);
}
.image-container img:hover {
transform: scale(1.2);
}
</style>
<p>以下是一個(gè)應(yīng)用示例：</p>
<div class="image-container">
<img src="https://picsum.photos/300/200" alt="示例圖片">
</div>

在上面的示例中，我們使用了一個(gè)class名為.image-container的div來作為圖片的父級(jí)容器。其中，圖片的寬度和高度均設(shè)置為100%，并且初始縮放比例為1。當(dāng)鼠標(biāo)懸停在圖片上時(shí)，我們將圖片的縮放比例增加到1.2，同時(shí)使用CSS過渡效果使這個(gè)過程更加平滑。最后，我們給.image-container設(shè)置了overflow:hidden屬性，防止圖片溢出容器。