在網頁設計中，我們常常需要使用圖片來豐富頁面內容，但有時候圖片太大超出了屏幕范圍，這就會影響頁面的美觀和用戶的視覺體驗。下面，我們就來介紹一下利用CSS解決這個問題的方法。

首先，我們可以利用CSS的屬性“max-width”和“max-height”來限制圖片的最大寬度和高度，這樣就能夠將圖片縮放到屏幕范圍內，避免超出屏幕。具體代碼如下：

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

上述代碼中，“100%”表示圖片最大寬度和高度為父元素的寬度和高度。

其次，我們也可以使用CSS的屬性“object-fit”來控制圖片的適應方式，使其更好地適應不同的屏幕大小。具體代碼如下：

img{
width: 100%;
height: 100%;
object-fit: contain;
}

上述代碼中，“contain”表示圖片會等比縮放以適應父元素的寬度和高度。

最后，我們還可以利用CSS的屬性“overflow”來控制圖片超出屏幕時是否顯示滾動條，具體代碼如下：

img{
max-width: 100%;
max-height: 100%;
overflow: hidden;
}

上述代碼中，“hidden”表示超出屏幕的部分會被隱藏。

總而言之，通過上述的CSS屬性，我們就可以輕松處理圖片超出屏幕的問題，達到更好的視覺效果，提高用戶的體驗感。希望這篇文章能夠對大家有所幫助。