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

<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>以下是一個應用示例：</p>
<div class="image-container">
<img src="https://picsum.photos/300/200" alt="示例圖片">
</div>

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