<div>是HTML中的一個標簽，用來創(chuàng)建一個獨立的容器，可以包含其他HTML元素，如文本、圖像、表格等。在<div>標簽中，我們可以使用<img>標簽來插入圖像。通過在<div>中使用<img>標簽，我們可以輕松地在網(wǎng)頁中顯示圖像。
下面我們來看幾個代碼案例來詳細說明如何在<div>中使用<img>標簽來顯示圖像。
案例一： 在這個案例中，我們將在<div>中插入一個圖像，并設(shè)置圖像的寬度和高度。

<p>\<div>\</p>
<p>\ \ \ \ <img src="image.jpg" width="300" height="200" alt="圖片">\</p>
<p>\</div>\</p>

在這個案例中，我們使用了<img>標簽來插入一個名為"image.jpg"的圖像。通過設(shè)置width和height屬性，我們設(shè)定了圖像的寬度為300像素，高度為200像素。alt屬性用于在圖像無法顯示時顯示替代文本，以提供更好的可訪問性。
案例二： 在這個案例中，我們將通過在CSS中設(shè)置背景圖像來在<div>中顯示圖像。

<p>\<style>\</p>
<p>\ \ \ \ .image-div \{</p>
<p>\ \ \ \ \ \ \ \ width: 400px;</p>
<p>\ \ \ \ \ \ \ \ height: 300px;</p>
<p>\ \ \ \ \ \ \ \ background-image: url("image.jpg");</p>
<p>\ \ \ \ \ \ \ \ background-size: cover;</p>
<p>\ \ \ \ \ \ \ \ background-position: center;</p>
<p>\ \ \ \ \ \ \ \ background-repeat: no-repeat;</p>
<p>\ \ \ \ \}</p>
<p>\</style>\</p>
<p>\<div class="image-div">\</div>\</p>

在這個案例中，我們通過設(shè)置CSS樣式來在<div>中顯示一個圖像。，我們創(chuàng)建一個名為"image-div"的類，并在其中設(shè)置寬度和高度。然后，我們使用background-image屬性將圖像作為背景圖像添加到<div>中。使用background-size屬性可以確保背景圖像充滿整個<div>容器。background-position屬性可以將圖像居中對齊。通過設(shè)置background-repeat屬性為no-repeat，我們可以防止圖像在<div>中重復(fù)顯示。
通過上述案例，我們可以清楚地了解如何在<div>中使用<img>標簽來顯示圖像。<div>可以成為圖像的容器，我們可以通過設(shè)置<img>標簽的屬性來調(diào)整圖像的尺寸和提供替代文本。此外，我們還可以使用CSS樣式將圖像作為背景圖像添加到<div>中，以實現(xiàn)更靈活的顯示效果。無論是使用<img>標簽還是CSS樣式，<div>都是一個強大的容器，可幫助我們在網(wǎng)頁中優(yōu)雅地展示圖像。