在網頁設計中，圖片溢出往往是我們經常面對的問題。如果圖片大小超出了其容器的范圍，那么頁面的美觀度和用戶體驗都會受到影響。以下我們將介紹一些CSS技巧來解決這個問題。

img{
max-width: 100%;
height: auto;
}

上面這段CSS代碼是最常見的解決方案。我們可以對img標簽應用此樣式，它們將會根據容器大小調整尺寸，但不會超過其原始大小。同時保持它們的高度在容器大小范圍內，使圖片不會被拉伸變形；此外，這種方法還可以保持圖片的比例。

如果想限制最大高度并讓圖片水平居中，可以使用以下CSS：

.container{
max-height: 400px;
text-align: center;
}
img{
max-height: 100%;
max-width: 100%;
margin: 0 auto;
display: block;
}

上面這段CSS代碼中，容器設置了最大高度，并水平居中對齊。圖片被設置了最大高度和寬度，并且居中展示。這樣可以避免圖片變形，同時保持美觀。

如果你想裁剪圖片而不是縮小它們來適應容器，可以使用以下方法：

.container{
width: 200px;
height: 200px;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}

在這個CSS代碼中，容器設置了寬度和高度，并使用overflow屬性隱藏超出容器大小的內容。圖片被設置為100%寬度和高度，這樣它將完全填充容器。

總結來說，圖片溢出問題的解決方案取決于實際需求。可以使用max-width、max-height和overflow等CSS屬性來解決問題，以達到最佳效果。