Translate den Kreis auf Bild beim Zoomen in/out das Bild

Question

Ich habe ein Bild und hatte einen Kreis (gezeichnet mit CSS3) drin.

Jetzt, wenn ich das Bild heranzoome, möchte ich die Position des Kreises an der gleichen Stelle im Bild behalten, so dass beim Vergrößern/Verkleinern des Kreises der Kreis übersetzt wird, aber ich kann nicht Berechnen Sie die Koordinaten, nach denen ich den Kreis auf dem Bild vergrößern/verkleinern muss. Irgendein Vorschlag!!

Das Bild und der Kreis sind die Geschwister Elemente in HTML

Answer 1

Es dauerte eine Weile, aber ich schrieb etwas, das mit <img>-Tag und einem anderen Element mit der Position verwendet werden kann: absolute ;.

$(document).ready(function() { 
 
    function setDimentions(first) { 
 
    IW = $('.img_container img').width(); 
 
    IH = $('.img_container img').height(); 
 
    PW = $('.pointer').outerWidth(); 
 
    PH = $('.pointer').outerHeight(); 
 
    pointerL = Number($('.pointer').css('left').replace('px', '')); 
 
    pointerT = Number($('.pointer').css('top').replace('px', '')); 
 
    if (first) { 
 
     Lperc = pointerL * 100/IW; 
 
     Tperc = pointerT * 100/IH; 
 
     Wperc = PW * 100/IW; 
 
     Hperc = PH * 100/IH; 
 
    } 
 
    Lpx = Lperc * IW/100; 
 
    Tpx = Tperc * IH/100; 
 
    Wpx = Wperc * IW/100; 
 
    Hpx = Hperc * IH/100; 
 
    } 
 
    setDimentions(true); 
 
    $(window).on('resize', function() { 
 
    setDimentions(); 
 
    $('.pointer').css({ 
 
     'width': Wpx, 
 
     'height': Hpx, 
 
     'top': Tpx, 
 
     'left': Lpx 
 
    }) 
 
    }) 
 
});

* { 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
.img_container { 
 
    width: 80%; 
 
    margin: 0 10%; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.pointer { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 999px; 
 
    border: thin solid red; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 16%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="img_container"> 
 
    <img src="http://i.imgur.com/XXxgr7xg.jpg"> 
 
    <div class="pointer"> 
 
    </div> 
 
</div>