CSS（層疊樣式表）在當前頁面放大圖片是一個常見需求，比如當用戶需要查看一個圖片的細節時，可以通過點擊或懸浮在圖片上來實現放大。下面我們來看一下如何用CSS實現這一功能。

/* CSS代碼 */
.zoom {
display:inline-block;
position:relative;
}
.zoom img {
display:block;
}
.zoom:after {
content:'';
display:block; 
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin:-25px 0 0 -25px;
background:url(/img/zoom.png) 0 0 no-repeat;
cursor:pointer;
}
.zoom img:hover {
opacity:0.7;
}
.zoom img:hover + .zoom:after {
opacity:1;
}
.zoom img {
max-width:100%;
}
.zoomContainer {
position:relative;
}
.zoomWindowContainer {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
pointer-events:none;
}
.zoomWindow {
position:absolute;
width:400px;
height:400px;
pointer-events:auto;
border:1px solid #ccc;
background-color:#fff;
}

在上面的代碼中，我們利用了CSS中的偽元素（:after），用它來實現鼠標懸浮在圖片上時出現一個放大鏡圖標。我們還使用了opacity屬性，使圖片在鼠標懸浮時透明度降低，以及利用了max-width屬性，使圖片在響應式布局下可以自適應大小。

為了實現縮放功能，我們還需要添加一些JavaScript代碼：

// JavaScript代碼
$(document).ready(function() {
$('.zoom').zoom();
});

這里我們使用了jQuery庫的$.zoom插件，通過調用.zoom()函數來實現縮放功能。當然，你也可以選擇其他的插件或自己編寫代碼來實現這一功能。

總的來說，利用CSS和JavaScript實現圖片縮放功能并不難，只需要一些基本的HTML、CSS、JavaScript編程知識即可。希望本篇文章對你有所幫助。