<div>是HTML中的一個標簽，用來創建一個容器，可以用來包裹其他HTML元素。而<img>是一個用于在網頁中插入圖片的標簽。在網頁中，我們經常需要控制<img>的大小，比如縮小或放大圖片以適應頁面布局。在本文中，我們將探討如何使用<div>和<img>標簽來控制圖片大小。
，我們來看一個簡單的例子。假設我們有一張圖片，寬度為500像素，高度為300像素，我們想將其顯示在網頁中的一個容器中，并調整該容器的大小為200像素寬，150像素高。那么我們可以這樣寫HTML代碼：

示例1：

<div style="width:200px; height:150px;">
<img src="example.jpg" width="500" height="300">
</div>

在這個示例中，我們使用了一個<div>標簽，并在其style屬性中設置了寬度為200像素，高度為150像素。然后，在<div>內部，我們插入了一個<img>標簽，并在其屬性中設置了圖片的寬度為500像素，高度為300像素。這樣，圖片就會被顯示在一個200像素寬，150像素高的容器中。
接下來，我們來看一個稍微復雜一些的例子。假設我們有一個圖片列表，其中包含多張圖片，我們想將它們按照一定的比例進行顯示。具體來說，我們想讓每張圖片的寬度為頁面寬度的50%，高度為寬度的一半。那么我們可以這樣寫HTML代碼：

示例2：

<div style="width:50%;">
<img src="image1.jpg" style="width:100%; height:50%;">
</div>
<div style="width:50%;">
<img src="image2.jpg" style="width:100%; height:50%;">
</div>

在這個示例中，我們使用了兩個<div>標簽，分別用來容納兩張圖片。我們設置每個容器的寬度為頁面寬度的50%（假設網頁寬度為1000像素）。然后，我們在每個容器內部使用<img>標簽，并通過設置其style屬性來控制圖片的大小。對于每張圖片，我們設置寬度為100%（即容器寬度的100%），高度為50%（即寬度的一半）。這樣，圖片就會按照指定的比例進行顯示。
除了使用style屬性來控制圖片大小外，我們還可以使用CSS來實現相同的效果。例如，我們可以通過定義CSS類來控制圖片的大小，并將該類應用于<img>標簽。下面是一個使用CSS的示例：

示例3：

<style>
.img-container {
width:200px;
height:150px;
}
.img-container img {
width:100%;
height:100%;
}
</style>
<br>
<div class="img-container">
<img src="example.jpg">
</div>

在這個示例中，我們定義了一個CSS類.img-container，其中包含了容器的寬度和高度屬性。然后，我們在該類中還定義了img選擇器，用來設置圖片的大小。最后，我們在HTML代碼中使用<div>標簽，并將類名設置為img-container，這樣該類的樣式定義就會應用于這個容器中的<img>標簽。
通過上述幾個例子，我們可以看到，使用<div>和<img>標簽可以很方便地控制圖片的大小。無論是通過style屬性還是CSS類，我們都可以靈活地調整容器和圖片的尺寸，以實現網頁布局的需要。在實際開發中，我們可以根據具體的設計要求和網頁布局，進一步優化和調整圖片大小的顯示效果。