div是HTML中的一個常用標簽，它用于在網頁上劃分不同的區域，并且可以對這些區域進行樣式和布局上的控制。在網頁設計中，我們經常需要在div中放入圖片。通過將圖片放入div中，我們可以更加靈活地控制圖片的大小、位置和樣式。接下來，我將通過幾個代碼案例來詳細解釋如何使用div放入圖片。
案例一：

，我們需要在HTML文件中創建一個div，然后在這個div中放入圖片。

<div>
<img src="example.jpg" alt="示例圖片">
</div>

在上面的代碼中，<img>標簽用于定義圖片。我們可以通過src屬性指定圖片的路徑，并通過alt屬性提供對圖片的描述。通過將<img>標簽放在<div>標簽之內，我們將圖片放入了這個div中。

案例二：

除了通過路徑直接引用圖片外，我們還可以使用CSS來設置div的背景圖像，從而實現在div中放入圖片的效果。

<style>
.image-div {
background-image: url('example.jpg');
background-size: cover;
width: 300px;
height: 200px;
}
</style>
<br>
<div class="image-div">
<!-- 這里可以添加一些文字或其他內容 -->
</div>

在上面的代碼中，我們在<style>標簽中定義了一個名為.image-div的CSS類。通過設置background-image屬性，我們將example.jpg作為div的背景圖像。通過設置width和height屬性，我們可以控制div的大小。通過在<div>標簽中添加image-div類，我們將圖片放入了這個div中。你還可以在<div>標簽中添加一些文字或其他內容。另外，background-size: cover;屬性用于保持圖片比例，同時使圖片完全覆蓋div。

案例三：

在某些情況下，我們可能想要在一個div中放入多張圖片。

<div>
<img src="example1.jpg" alt="示例圖片1">
<img src="example2.jpg" alt="示例圖片2">
<img src="example3.jpg" alt="示例圖片3">
</div>

在上面的代碼中，我們在同一個div中使用了多個<img>標簽來放入多張圖片。通過在<img>標簽中指定不同的路徑和描述，我們可以在同一個div中展示多張圖片。

綜上所述，使用div放入圖片是網頁設計中常用的技巧之一。通過將圖片放入div中，我們可以更加靈活地控制圖片的大小、位置和樣式。可以通過直接引用圖片路徑或使用CSS設置背景圖像的方式來實現這一效果，還可以在一個div中放入多張圖片。通過靈活運用這些技巧，我們可以為網頁設計增添更多的創意和個性。