<div>標簽是HTML中用來定義文檔中的一個區塊的元素，而<img>標簽則是用來在網頁中插入圖片的元素。通常情況下，<img>標簽中的圖片會按照原有的比例顯示，保持其原有的寬高比。然而，在某些特殊情況下，我們可能希望拉伸圖片，讓其填滿<div>元素的大小。本文將介紹如何使用CSS來實現<div>中的<img>拉伸的效果，并提供一些代碼案例進行詳細說明。
，我們可以通過設置CSS樣式中的width屬性和height屬性來實現圖片的拉伸效果。具體的代碼如下所示：

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

在上述代碼中，我們給<img>元素添加了style屬性，并設置了width屬性和height屬性的值為100%，這樣圖片就會按照<div>元素的大小進行拉伸。
除了直接在<img>標簽上設置樣式外，我們還可以通過CSS樣式表來設置圖片的拉伸效果。具體的代碼如下所示：

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

在上述代碼中，我們給<div>元素添加了一個名為"image-container"的類，然后在CSS樣式表中設置了該類的寬度和高度。接下來，我們使用了CSS后代選擇器來為<div>元素內部的<img>元素設置寬度和高度，使其填滿整個<div>元素。
通過上述的代碼案例，我們可以實現<div>中的<img>元素的拉伸效果。可以根據實際需求調整寬度和高度的值，以達到滿意的效果。同時，我們也可以根據需要使用其他的CSS屬性，比如max-width和max-height，來控制圖片的最大寬度和最大高度，以避免圖片過度拉伸而失真。
來說，通過設置CSS樣式中的width屬性和height屬性，我們可以實現<div>中的<img>元素的拉伸效果。無論是直接在<img>標簽上設置樣式，還是通過CSS樣式表來設置樣式，都能夠實現圖片填滿<div>元素的大小的效果。希望本文提供的代碼案例能夠幫助讀者更好地理解和應用這一技巧。