<div>元素是HTML中用于劃分不同區塊的一個標簽，它可以包含文本、圖像、鏈接、按鈕等其他HTML元素。而<img>元素則是用于在HTML文檔中插入圖像的標簽，它具有自身的寬度和高度。有時，當在<div>元素中插入<img>元素時，<img>元素的大小可能會超過<div>容器的大小，從而導致<img>溢出。本文將詳細介紹<img>元素溢出的幾種情況，并提供相應的代碼案例進行說明。
第一個情況是當<img>元素的寬度超過<div>元素的寬度時，圖片可能會溢出<div>容器。為了解決這個問題，我們可以使用CSS的overflow屬性來控制容器內內容的溢出情況。通過將overflow屬性設置為"hidden"，我們可以將<div>容器中超出部分的內容進行隱藏，但是這樣也會引發一些問題，如圖片被裁剪或部分內容無法顯示。下面是一段使用overflow屬性隱藏溢出部分的代碼案例：

<div style="width: 200px; height: 200px; overflow: hidden;">
<img src="example.jpg" alt="Example Image" style="width: 300px;">
</div>

在上述代碼中，<div>元素的寬度設置為200像素，<img>元素的寬度設置為300像素，超過了容器的寬度。通過設置overflow屬性為"hidden"，<img>元素的溢出部分被隱藏，但只能顯示<div>容器中的前200像素寬度范圍內的內容。
第二個情況是當<img>元素的高度超過<div>元素的高度時，圖片可能會溢出<div>容器。同樣地，我們可以使用CSS的overflow屬性來解決這個問題。以下是一段使用overflow屬性隱藏高度溢出部分的代碼案例：

<div style="width: 200px; height: 200px; overflow: hidden;">
<img src="example.jpg" alt="Example Image" style="height: 300px;">
</div>

在上述代碼中，<div>元素的高度設置為200像素，<img>元素的高度設置為300像素，超過了容器的高度。通過設置overflow屬性為"hidden"，<img>元素的溢出部分被隱藏，只能顯示<div>容器中的前200像素高度范圍內的內容。
第三個情況是當<img>元素的寬度和高度都超過<div>元素的寬度和高度時，圖片可能會同時溢出<div>容器的寬度和高度。為了解決這個問題，我們可以使用CSS的overflow-x和overflow-y屬性來分別控制容器內內容在水平和垂直方向上的溢出情況。以下是一段使用overflow-x和overflow-y屬性隱藏寬高溢出部分的代碼案例：

<div style="width: 200px; height: 200px; overflow-x: hidden; overflow-y: hidden;">
<img src="example.jpg" alt="Example Image" style="width: 300px; height: 300px;">
</div>

在上述代碼中，<div>元素的寬度和高度都設置為200像素，<img>元素的寬度和高度都設置為300像素，在寬高上都超過了容器的寬度和高度。通過分別設置overflow-x和overflow-y屬性為"hidden"，<img>元素的溢出部分被隱藏，只能顯示<div>容器中的前200像素寬度和高度范圍內的內容。
上述代碼案例提供了將<img>元素溢出進行隱藏的解決方案，通過設置CSS的overflow屬性，我們可以控制內容的溢出情況，以確保<img>元素在<div>容器內正常顯示。在實際應用中，我們可以根據具體的需求選擇合適的解決方案來處理<img>溢出問題。