在Web頁面開發中，點擊圖片放大功能可以提高網站的用戶體驗，讓用戶更輕松地查看圖片的細節內容。下面是一個使用HTML代碼實現點擊整個圖片放大的例子：
<html>
<head>
<title>點擊圖片放大效果</title>
<style>
img {
max-width: 100%;
height: auto;
cursor: pointer;
}
.modal {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
justify-content: center;
align-items: center;
}
.modal img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
#modal-close {
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<img src="img/sample.jpg" alt="Sample Image" onclick="showModal(this)">
<div class="modal" onclick="hideModal()">
<img src="" alt="Enlarged Image">
<span id="modal-close">x</span>
</div>
<script>
function showModal(img) {
var modal = document.querySelector('.modal');
var modalImg = document.querySelector('.modal img');
modalImg.src = img.src;
modal.style.display = 'flex';
}
function hideModal() {
var modal = document.querySelector('.modal');
modal.style.display = 'none';
}
</script>
</body>
</html>上面這段代碼使用了HTML、CSS和JavaScript。其中，CSS定義了兩個類名：img用于控制原始圖片的最大寬度為100%、高度自動調整和鼠標指針為手型，modal用于控制彈出層的背景色、絕對定位和隱藏樣式。彈出層里的圖片要同時適應彈出層的大小，使用了CSS中的object-fit: contain;屬性。彈出層里還有一個關閉按鈕，使用了絕對定位來實現。
JavaScript代碼使用了兩個函數：showModal()和hideModal()。當用戶點擊原始圖片時，會調用showModal()函數，該函數會顯示彈出層，并將原始圖片的src屬性賦給彈出層里的圖片。當用戶點擊彈出層時，會調用hideModal()函數，該函數會隱藏彈出層。彈出層的顯示和隱藏使用了CSS中的display: flex;和display: none;屬性。
在網頁的具體應用中，可以使用相應的文件路徑和圖片文件名替換掉例子代碼中的內容，從而實現點擊整個圖片放大的效果。