Javascript 当浏览器调整大小时，不断在视频上移动可调整大小/可拖动的图像

我正在处理的是，当浏览器调整大小时，我希望在视频上不断移动/调整图像大小（它本身就是可调整大小/可拖动的图像）

我使用的HTML/CSS/JS代码片段是：

HTML:

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;
}

$(function() {
$('#wrapper').draggable();
$('#image').resizable({
start: function( event, ui ) {
   $('#overlay').show();
  },

stop: function( event, ui ) {
   $('#overlay').hide();
  }
  }
);
});

JS:

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;
}

$(function() {
$('#wrapper').draggable();
$('#image').resizable({
start: function( event, ui ) {
   $('#overlay').show();
  },

stop: function( event, ui ) {
   $('#overlay').hide();
  }
  }
);
});

问题陈述：

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;
}

$(function() {
$('#wrapper').draggable();
$('#image').resizable({
start: function( event, ui ) {
   $('#overlay').show();
  },

stop: function( event, ui ) {
   $('#overlay').hide();
  }
  }
);
});

我想知道我应该在上面的JS代码中做些什么更改，这样每当我调整浏览器的大小时，可拖动/可调整大小的图像也应该不断移动

---

例如：让我们假设我将谷歌图像全屏放置在一个家伙的鼻子上，如果我调整浏览器窗口的大小，谷歌图像似乎不会停留在鼻子上，如小提琴所示一个想法是根据相对于容器的百分比值而不是像素值来定位

这样，定位将是响应的，这意味着相对于容器的位置将是相同的，而不管容器的大小

将像素转换为百分比的计算基于。
将在调整大小和拖动时对执行计算

这里有一个例子（因为YouTube嵌入在这里不起作用）

函数转换成百分比（$el）{
var$parent=$el.parent（）；
$el.css({
左：parseInt（$el.position（）.left）/$parent.width（）*100+“%”，
顶部：parseInt（$el.position（）.top）/$parent.outerHeight（）*100+“%”，
宽度：$el.width（）/$parent.width（）*100+“%”，
高度：$el.height（）/$parent.outerHeight（）*100+“%”
});
}
$（函数（）{
var$wrapper=$（“#wrapper”）；
var$overlay=$（“#overlay”）；
将_转换为_百分比（$wrapper）；
$wrapper
.拖拉({
停止：功能（事件、用户界面）{
将_转换为_百分比（$wrapper）；
}
})
.可调整大小({
开始：功能（事件、用户界面）{
$overlay.show（）；
},
停止：功能（事件、用户界面）{
$overlay.hide（）；
将_转换为_百分比（$wrapper）；
}
});
});
#包装器{
z指数：100；
位置：绝对位置；
}
#包装机{
宽度：100%；
身高：100%；
}
.嵌入响应{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：红色；
不透明度：.5；
显示：无；
}

您可能会发现其中一个很有用：或。@showdev这些很有用，但我不确定如何在实际代码中实现。只是检查你是否明白我的问题。@showdev你在吗？想法是使用相对于其容器的百分比值而不是像素值来定位元素。@showdev嗨，我想知道你是否可以在小提琴中解释，以便我能够可视化。谢谢，谢谢，确实有用。这就是我正在寻找的解决方案。我已经创建了一个覆盖视频。它在事件开始时调整大小，在事件停止时隐藏。虽然我已经决定使用覆盖的概念，但覆盖的父div类似乎并没有结束标记。我在问你的意见，div的结束标签应该在哪里。让我知道你的想法，因为
或
（其中任何一个）没有结束div标记。你在吗？只是检查一下你是否还在。@john
.overlay
div是自动结束的，因此最后的
/>
（与
相对）。因为它没有textNode/子节点，并且从CSS获取其维度，所以这很好。@john抱歉，我昨晚回家了。我基于您的JSFIDLE的HTML。对不起，我不知道你在问什么。