<div>是HTML中一個常用的標簽，用于創建一個容器，可以用來包裹其他HTML元素，如文本、圖片、視頻等。本文將重點介紹如何使用<div>來約束圖片的顯示。
在HTML中，可以使用CSS樣式來設置<div>的屬性，包括寬度、高度、邊框、背景色等等。通過設置這些屬性，可以實現對圖片的大小、位置和樣式的調整，從而實現對圖片的約束。
下面將通過幾個代碼案例來詳細說明如何使用<div>約束圖片：
案例一：調整圖片大小
要調整圖片的大小，可以使用CSS的width和height屬性來設置<div>的寬度和高度。假設有一張圖片需要顯示在<div>中，可以使用以下代碼來約束圖片的大小：

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

在上述代碼中，<div>的寬度被設置為300px，高度被設置為200px。圖片的max-width和max-height屬性被設置為100%，表示圖片的最大寬度和最大高度為<div>的寬度和高度。
案例二：設置圖片居中
要將圖片居中顯示，可以使用CSS的margin屬性來設置<div>的外邊距。假設有一張圖片需要居中顯示，可以使用以下代碼來約束圖片的位置：

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

在上述代碼中，<div>的寬度和高度與案例一相同，增加了display、justify-content和align-items屬性。display屬性設置為flex，使<div>成為彈性容器；justify-content和align-items屬性設置為center，使<div>中的圖片在水平和垂直方向上都居中顯示。
案例三：添加邊框和背景色
要為圖片添加邊框和背景色，可以使用CSS的border和background屬性來設置<div>的邊框和背景樣式。假設有一張圖片需要添加邊框和背景色，可以使用以下代碼來約束圖片的樣式：

<div style="width: 300px; height: 200px; border: 1px solid #000; background-color: #ccc;">
<img src="image.jpg" alt="圖片" style="max-width: 100%; max-height: 100%;">
</div>

在上述代碼中，<div>的寬度和高度與案例一相同，增加了border和background-color屬性。border屬性設置為1px solid #000，表示邊框寬度為1像素，樣式為實線，顏色為黑色；background-color屬性設置為#ccc，表示背景色為淺灰色。
通過以上幾個代碼案例的演示，我們可以看到如何使用<div>來約束圖片的顯示。通過設置<div>的屬性，我們可以調整圖片的大小、位置和樣式，從而對圖片進行約束。在實際應用中，可以根據具體需求，靈活運用<div>和CSS樣式，實現更多樣化的圖片顯示效果。希望本文對您有所幫助！</div>