jQuery如何使用标记缩放图像

我有这个：

<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>

#包装纸{
显示：块；
位置：相对位置；
填充：0；
}
#选定图片img{
宽度：100%；
高度：自动；
}
.别针{
显示：无；
位置：绝对位置；
高度：50px；
宽度：50px；
填充：0；
保证金：0；
}

并使用以下命令将标记附加到图像：

<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();

$（函数（）{
$（“#选定的_图片”）。在（'单击'）上，函数（e）{
偏移量=$（'#所选图片'）。偏移量（）；
x=e.pageX-偏移量.left-25；
y=e.pageY-offset.top-25；
var pin=$（''）；
pin.uniqueId（）；
$（'pic#u wrapper'）。追加（pin）；
css（'left'，x）.css（'top'，y）.show（）；

我需要将#选定的#图片与所有管脚一起缩放，以便它们保持在相同的相对位置

我在div中找到了以下文本示例：

但我可以想出如何将这种方法应用到我的可调整大小的图片上，上面有绝对定位的图钉

---

谢谢您的帮助。

这里的想法很简单，您可以计算pin相对于正在单击的图像的百分比位置。当您使用带有百分比

顶部
/
左侧
值的
位置：绝对
时，它会告诉浏览器将元素定位在相对父项的百分比处>宽度/高度，因此一旦父尺寸发生更改，您的位置也将自动更新


$（函数（）{
$（“#选定的_图片”）。在（'单击'）上，函数（e）{
x=（（e.offsetX）/$（this.width（））*100+“%”；
y=（（e.offsetY）/$（this.height（））*100+“%”；
var pin=$（''）；
$（'pic#u wrapper'）。追加（pin）；
css（'left'，x）.css（'top'，y）.show（）；
})
})；
#picu包装器{
显示：块；
位置：相对位置；
填充：0；
}
#所选图片。地图{
显示：块；
背景：绿色；
宽度：100%；
高度：250px；
}
.别针{
显示：无；
位置：绝对位置；
高度：50px；
宽度：50px；
转换：翻译（-50%，-50%）；
填充：0；
保证金：0；
背景：蓝色；
}

用%值来定位管脚。你是说'e.pageX-offset.left-25'应该是屏幕宽度的%吗？管脚是'Position:absolute'-它们不随大小移动。这很好，对
顶部
和
左侧
位置使用
%
值。还要注意，您没有添加
管脚
元素在任何一点都可以连接到DOM，但位置会随着缩放而改变。我需要管脚相对于图像保持完全相同的位置。我的意思是在图像的同一点上image@linuxoid稍微更改了代码。请确保您的相对家长（
#picu-wrapper
）将与图像大小相同，否则定位将不正确。当您调整图像大小时，它们应该移动，因为它们由中心“附着”。因此，它们看起来会移动，但中心将位于同一点。实际上，您可以非常轻松地进行测试-使插针更小（如5px左右）你会看到它们在同一个位置。是的，你是对的。非常感谢你的帮助。它们现在都正确地移动了。但是我发现，如果我点击任何一个，它们就会分离（针脚可以拖动）从移动开始，始终保持在同一位置。我现在如何计算它们的新坐标？什么是事件“移动”？@linuxoid你确定你的其他代码没有导致这种行为吗？因为在我给出的代码中，
onclick
处理程序甚至没有为
引脚触发（因为它们在
#所选图片
元素之外）