在網頁中，我們經常需要展示圖片，而有時候，我們還需要讓用戶可以點擊圖片放大查看。那么，我們該如何用CSS來實現(xiàn)這個功能呢？

/* 定義圖片樣式 */
.img {
width: 200px; /* 設置圖片寬度 */
height: auto; /* 設置圖片高度自適應 */
cursor: pointer; /* 鼠標移入時顯示手型光標 */
}
/* 定義放大后的樣式 */
.img-full {
position: fixed; /* 設置圖片定位 */
top: 0;
left: 0;
width: 100%; /* 設置圖片寬度為窗口寬度 */
height: 100%; /* 設置圖片高度為窗口高度 */
z-index: 999; /* 設置層級，保證圖片在頂層顯示 */
background-color: rgba(0, 0, 0, 0.8); /* 設置半透明背景色 */
display: flex; /* 設置flex布局，使圖片垂直、水平居中 */
justify-content: center;
align-items: center;
}
/* 隱藏放大后的圖片 */
.img-full.hidden {
display: none;
}

首先，我們定義圖片的樣式，包含圖片的寬、高和鼠標移入時的樣式。

然后，我們定義放大后的樣式，包括定位、層級、背景顏色和居中顯示等。

最后，我們使用JavaScript來控制圖片的展示和隱藏：

let img = document.querySelector('.img');
let imgFull = document.querySelector('.img-full');
img.addEventListener('click', function() {
imgFull.classList.remove('hidden');
});
imgFull.addEventListener('click', function() {
imgFull.classList.add('hidden');
});

我們選擇圖片和放大后的圖片元素，并在圖片的點擊事件上添加展示放大圖片的邏輯，在放大圖片上也添加點擊事件，點擊后隱藏圖片。

這樣，我們就實現(xiàn)了在CSS中點擊圖片全屏放大的功能。該實現(xiàn)方法簡單易懂，并且具備很好的瀏覽器兼容性。