使用CSS放大以光標爲中心的圖像

Question

我有一個地圖圖像，當我點擊它時我想放大/縮小。下面的代碼可以縮放它，但我想放大以光標位置爲中心的圖像，並使水平滾動顯示。我該怎麼辦只有CSS？

CSS

input[type=checkbox]{ 
    display: none; 
} 

.container img{ 
    transition: transform 0.25s ease; 
    cursor: zoom-in; 
} 

input[type=checkbox]:checked ~ label > img{ 
    -webkit-transform: scale(2); 
    transform: scale(2); 
    cursor: zoom-out; 
} 

HTML

<div class="container"><input id="zoomCheck" type="checkbox" /> 
<label for="zoomCheck"> 
<img src="map.jpg" /> 
</label></div> 

Answer 1

我創造了你，你可以使用的邏輯。只需添加其他功能。

基本上，這就是你想要的。

小提琴：https://jsfiddle.net/zpobnetf/11/

你怎麼能實現呢？點擊

1. 獲得位置（clientX，clienY）

2. 克隆圖像放進去取決於是位置與背景圖像的DIV（圖像的SRC點擊）

3. 位置點擊。

正如你可以看到我的例子。我將clientX和clientY減去75.這是因爲我創建的框大小爲150x150。我把它分成兩份。所以，我可以將#box放在中心位置。

希望你得到它。乾杯!你能行的。只要相信！

let mapa = document.getElementById('map'), 
 
\t box = document.getElementById('box'); 
 

 
mapa.addEventListener('click', (e) => { 
 
\t let xPos = (e.clientX - 75), 
 
    \t yPos = (e.clientY - 75); 
 
    
 
    box.style.display = 'initial'; 
 
    box.style.top = `${yPos}px`; 
 
    box.style.left = `${xPos}px`; 
 
    box.style.backgroundPosition = `-${xPos}px -${yPos}px`; 
 
});

#box { 
 
    height: 150px; 
 
    width: 150px; 
 
    background: rgba(255,255,255,0.8); 
 
    background-image: url('https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png'); 
 
    background-repeat: no-repeat; 
 
    transform: scale(1.4); 
 
    position: absolute; 
 
    display: none; 
 
}

<img id="map" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png"> 
 

 
<div id="box"></div>