在调整浏览器大小时，不断地在video上移动可resize/可拖动的图像

我正在研究这个小提琴 ， 当浏览器resize时 ，我想在video上不断地移动/调整图像大小（它本身可resize/可拖动图像） 。

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

HTML：

CSS：

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

JS：

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

问题陈述：

我想知道我应该在上面的JS代码中做出哪些更改，以便每当我调整浏览器大小时，可拖动/可resize的图像也应该不断移动 。

例如：让我们假设我将谷歌图像放在一个人的鼻子上全屏幕 ，如果我调整浏览器窗口大小， 谷歌图像似乎不会停留在鼻子上 ，如小提琴https：// jsfiddle所示达网络/ obn4yph0 /嵌入/结果

Answer 1

一种想法是相对于容器的百分比值而不是像素值。

这样，定位将是响应的，这意味着无论容器的大小如何，相对于容器的位置都是相同的。

将像素转换为百分比的计算基于peteykun的 这个答案 。
对resize和拖动的stop事件执行计算。

这是一个JSFiddle （因为YouTube嵌入在这里不起作用）。

 function convert_to_percentage($el) { var $parent = $el.parent(); $el.css({ left: parseInt($el.position().left) / $parent.width() * 100 + "%", top: parseInt($el.position().top) / $parent.outerHeight() * 100 + "%", width: $el.width() / $parent.width() * 100 + "%", height: $el.height() / $parent.outerHeight() * 100 + "%" }); } $(function() { var $wrapper = $('#wrapper'); var $overlay = $('#overlay'); convert_to_percentage($wrapper); $wrapper .draggable({ stop: function(event, ui) { convert_to_percentage($wrapper); } }) .resizable({ start: function(event, ui) { $overlay.show(); }, stop: function(event, ui) { $overlay.hide(); convert_to_percentage($wrapper); } }); }); 

 #wrapper { z-index: 100; position: absolute; } #wrapper img { width: 100%; height: 100%; } .embed-responsive { position: relative; } .overlay { position: absolute; width: 100%; height: 100%; background: red; opacity: .5; display: none; }