<div> 是 HTML 中的一個標簽，用于創建一個容器，可以用來包裹其他 HTML 元素。而 <img> 則是 HTML 中用于顯示圖片的標簽。在網頁設計中，經常需要使用 <div> 標簽來布局頁面，并通過 <img> 標簽來顯示圖片。下面將通過幾個代碼案例來詳細解釋說明。
第一個案例是一個簡單的圖片居中顯示的布局。代碼如下：

<p><div style="display: flex; justify-content: center; align-items: center; height: 300px;"></p>
<p>  <img src="example.jpg" alt="Example Image"></p>
<p></div></p>

在這個例子中，我們使用了 <div> 標簽來創建一個容器，通過設置其樣式屬性 display: flex、justify-content: center 和 align-items: center，使圖片在容器中居中顯示。
第二個案例是一個圖片板式布局，包含多張圖片，每行顯示兩張。代碼如下：

<p><div style="display: flex; flex-wrap: wrap;"></p>
<p>  <img src="image1.jpg" alt="Image 1" style="width: 50%; height: auto;"></p>
<p>  <img src="image2.jpg" alt="Image 2" style="width: 50%; height: auto;"></p>
<p>  <img src="image3.jpg" alt="Image 3" style="width: 50%; height: auto;"></p>
<p>  <img src="image4.jpg" alt="Image 4" style="width: 50%; height: auto;"></p>
<p></div></p>

在這個例子中，我們同樣使用了 <div> 標簽來創建一個容器，并通過設置 display: flex 和 flex-wrap: wrap 來實現圖片的排列。每個圖片的樣式通過內聯樣式來設置，其中 width: 50% 讓每行顯示兩張圖片。
第三個案例是一個響應式圖片展示的布局，圖片在不同屏幕尺寸下顯示不同大小。代碼如下：

<p><div style="width: 100%;"></p>
<p>  <img src="image.jpg" alt="Image" style="width: 100%; height: auto;"></p>
<p></div></p>

在這個例子中，我們設置了 <div> 的寬度為 100%，并且圖片的樣式也將寬度設置為 100%，這樣圖片就能夠自適應父容器的寬度，在不同屏幕尺寸下展示不同大小的圖片。
這些代碼案例展示了如何使用 <div> 和 <img> 標簽來創建各種圖片布局。通過靈活運用這兩個標簽的屬性和樣式，我們可以實現豐富多樣的圖片展示效果。參考其他文章真實案例并加以修改，能夠進一步豐富和創新我們的設計。希望以上內容對你有所幫助！