<div> 預覽圖片是一種常見的Web開發技術，它允許用戶在不離開當前頁面的情況下，在一個指定的區域內瀏覽和查看圖片。使用<div>元素可以創建一個專門用于顯示預覽圖片的容器。通過添加一些CSS樣式和Javascript代碼，我們可以實現一個簡單而實用的圖片預覽功能。
下面將通過幾個代碼案例來詳細解釋說明如何使用<div>來實現預覽圖片的功能。
案例1：基本的圖片預覽功能
假設我們有一個圖片展示頁面，用戶可以點擊某個圖片來查看其大圖。我們可以使用<div>來創建一個圖片預覽容器，并通過Javascript代碼來實現點擊預覽功能。

<p>點擊圖片來預覽大圖：</p>
<div id="imagePreview">
<img src="thumbnail.jpg" alt="縮略圖" onclick="showImage('fullsize.jpg')">
</div>
<br>
<script>
function showImage(imageUrl) {
var previewContainer = document.getElementById('imagePreview');
var image = previewContainer.getElementsByTagName('img')[0];
image.src = imageUrl;
}
</script>

在上面的代碼中，我們使用<div>元素創建了一個id為imagePreview的容器，然后在該容器內部放置了一個<img>元素作為顯示圖片的預覽。當用戶點擊預覽圖時，Javascript函數showImage()會被調用，并將大圖的URL傳遞給它。showImage()函數會將預覽容器內的<img>元素的src屬性設置為大圖的URL，從而實現圖片的預覽功能。
案例2：帶有縮放功能的圖片預覽
在某些情況下，用戶可能希望能夠在預覽圖上進行縮放操作，以便更好地查看細節。下面的代碼演示了如何使用<div>來實現帶有縮放功能的圖片預覽。

<div id="imagePreview" style="width: 500px; height: 500px; overflow: hidden;">
<img src="thumbnail.jpg" alt="縮略圖" onclick="zoomImage()">
</div>
<br>
<script>
function zoomImage() {
var previewContainer = document.getElementById('imagePreview');
var image = previewContainer.getElementsByTagName('img')[0];
<br>
    if (image.style.width == '' || image.style.width == '100%') {
image.style.width = '200%';
image.style.height = '200%';
} else {
image.style.width = '100%';
image.style.height = '100%';
}
}
</script>

在這個例子中，我們添加了一些CSS樣式來限定預覽容器的尺寸，并設置了溢出屬性，以便可以在預覽容器內部進行滾動顯示。當用戶點擊預覽圖時，Javascript函數zoomImage()會被調用。該函數通過修改<img>元素的寬度和高度樣式來實現縮放功能。當圖片的寬度和高度樣式設置為200%時，圖片將以兩倍的大小顯示。再次點擊圖片時，寬度和高度樣式將被重置為100%，圖片回到原始大小。
文章到此結束，我們通過幾個代碼案例詳細解釋了如何使用<div>來實現預覽圖片的功能。通過加上一些CSS樣式和Javascript代碼，您可以根據自己的需求來定制和擴展這些功能，以實現更豐富的預覽效果。希望本文對您有所幫助！