<div>標簽在HTML中用來創建一個容器，用于分組HTML元素。而<div>圖片100%的意思是希望圖片能夠自動適應其所在容器的大小，并且以100%的比例進行縮放，以確保圖片看起來不會變形或被裁剪。
下面我們來看幾個代碼案例來詳細解釋說明<div>圖片100%的效果。
案例一：圖片自適應容器大小

在這個案例中，我們希望圖片能夠自動適應其所在容器的大小，并以100%的比例進行縮放。

<div style="width: 500px; height: 300px;">
<img src="image.jpg" style="width: 100%; height: 100%;" alt="圖片">
</div>

在這個案例中，我們創建一個<div>容器，并設置其寬度為500像素，高度為300像素。然后在容器中插入一張圖片，使用<span style="color: blue;">style</span>屬性設置圖片的寬度和高度為100%。

這樣，無論<div>容器的大小如何變化，圖片都會自動適應并以100%的比例進行縮放，保持圖片不變形。

案例二：圖片鋪滿整個屏幕

在這個案例中，我們希望圖片能夠鋪滿整個屏幕，并以100%的比例進行縮放。

<div style="width: 100%; height: 100vh;">
<img src="image.jpg" style="width: 100%; height: 100%;" alt="圖片">
</div>

在這個案例中，我們創建一個<div>容器，并使用<span style="color: blue;">style</span>屬性將其寬度和高度都設置為100%。

同時，我們使用<span style="color: blue;">100vh</span>指定了容器的高度為屏幕的100%。

在容器中插入一張圖片，并使用<span style="color: blue;">style</span>屬性設置圖片的寬度和高度都為100%。

這樣，無論屏幕的大小如何變化，圖片都會自動鋪滿整個屏幕，并以100%的比例進行縮放。

案例三：圖片在容器中居中顯示

在這個案例中，我們希望圖片能夠在容器中居中顯示，并以100%的比例進行縮放。

<div style="width: 500px; height: 300px; display: flex; align-items: center; justify-content: center;">
<img src="image.jpg" style="max-width: 100%; max-height: 100%;" alt="圖片">
</div>

在這個案例中，我們創建一個<div>容器，并設置其寬度為500像素，高度為300像素。

同時，我們使用<span style="color: blue;">display: flex</span>、<span style="color: blue;">align-items: center</span>和<span style="color: blue;">justify-content: center</span>屬性將容器內的內容居中對齊。

在容器中插入一張圖片，并使用<span style="color: blue;">style</span>屬性設置圖片的最大寬度和最大高度都為100%。

這樣，無論容器的大小如何變化，圖片都會以100%的比例進行縮放，并居中顯示在容器中。

綜上所述，通過使用<div>圖片100%的方法，我們可以實現圖片的自適應、鋪滿屏幕或在容器中居中顯示的效果。根據具體的需求和情況，我們可以靈活應用這些代碼案例來實現不同的布局效果。這種方法在響應式網頁設計中非常實用，能夠讓圖片在不同設備和屏幕大小下都能夠以合適的比例進行顯示，提升用戶體驗。希望本文對你有所幫助！