jQuery如何使用标记缩放图像

Question

我有这个：

<style>
#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture img {
    width: 100%;
    height: auto;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
}
</style>

<div id="pic_wrapper">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

并将标记附加到图像：

<script type="text/javascript" charset="UTF-8">
$(function(){
    $('#selected_picture').on('click', function(e){
        offset = $('#selected_picture').offset();
        x = e.pageX - offset.left - 25;
        y = e.pageY - offset.top - 25;
        var pin = $('<div class="pin"><img class="pin-img" src="pin.png" /></div>');
        pin.uniqueId();
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();

我需要将#selected_picture 连同所有引脚一起缩放，以使它们保持在相同的相对位置。

我在 div 中找到了这个文本示例：https://codepen.io/chriscoyier/pen/VvRoWy

但我可以弄清楚如何将这种方法应用于我的可调整大小的图片，上面有绝对定位的图钉。

感谢您的帮助。

Answer 1

这里的想法很简单，您可以计算图钉相对于您单击的图像的位置百分比。当您使用 position: absolute 和百分比 top/left 值时，它会告诉浏览器将元素定位在 relative parent 宽度/高度的百分比处，因此一旦父尺寸发生变化，您的位置也会自动更新。

$(function(){
    $('#selected_picture').on('click', function(e){
        x = ((e.offsetX) / $(this).width()) * 100 + "%";
        y = ((e.offsetY) / $(this).height()) * 100 + "%";
        var pin = $('<div class="pin"></div>');
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();
    })
});

#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture .map {
    display: block;
    background: green;
    width: 100%;
    height: 250px;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_wrapper">
    <div id="selected_picture">
        <div class="map"></div>
    </div>
</div>