div中的圖片超出現象指的是在一個div容器中，圖片的實際大小超出了div容器的尺寸，導致圖片無法完全顯示在div中。這種情況可能會產生滾動條，破壞了頁面的整體布局。解決這個問題的方法有多種，可以通過設置CSS屬性或使用JavaScript進行調整。下面將通過幾個代碼案例詳細解釋這個問題并給出解決方案。
我們來看一個常見的情況，一個div容器中的圖片大小超出了容器的尺寸。代碼如下：

<div class="container">
<img src="image.jpg" />
</div>

在上面的代碼中，.container是一個具有固定寬度和高度的div容器，但是圖片的實際大小超出了這個容器的尺寸。為了解決這個問題，我們可以設置圖片的最大寬度和高度，讓圖片自適應容器的尺寸。代碼如下：

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

在上面的代碼中，我們使用max-width: 100%和max-height: 100%設置了圖片的最大寬度和高度，這樣可以確保圖片不會超出div容器的尺寸。通過這種方式，我們可以保持頁面的整體布局完整，避免滾動條的出現。
接下來我們來看一個使用JavaScript解決圖片超出問題的案例。有時候，我們需要根據圖片的實際大小來調整div容器的尺寸。代碼如下：

<div id="container">
<img id="image" src="image.jpg" />
</div>
<br>
    <script>
var container = document.getElementById("container");
var image = document.getElementById("image");
<br>
      image.addEventListener("load", function(){
container.style.width = image.width + "px";
container.style.height = image.height + "px";
});
</script>

在上面的代碼中，我們通過JavaScript獲取了容器和圖片的元素，并使用addEventListener綁定了圖片加載完成的事件。在事件處理函數中，我們獲取了圖片的寬度和高度，并設置了div容器的尺寸，使其與圖片的實際大小一致。通過這種方式，我們可以確保圖片完全顯示在div容器中，不會超出。
通過上述幾個案例，我們可以看到解決div中圖片超出問題的方法有多種。可以通過設置CSS屬性來控制圖片的最大寬度和高度，讓圖片自適應容器的尺寸；也可以使用JavaScript根據圖片的實際大小來調整容器的尺寸。在實際開發中，我們可以根據具體的需求選擇適合的方法。無論采用哪種方法，我們都可以有效地解決div中圖片超出的問題，提升頁面的用戶體驗。