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

Question

我正在处理fiddle，我想在其中在调整浏览器大小时在视频上不断移动/调整图像（其本身是可调整大小/可拖动的图像）。

我用过的HTML/CSS/JS代码的sn-ps是：

HTML：

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

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 代码中进行哪些更改，以便 每当我调整浏览器的大小时，可拖动/调整大小的图像也应该不断移动。

例如：假设我将 google 图像全屏放在一个人的鼻子上，如果我调整浏览器窗口的大小，google 图像似乎不会保留在鼻子上 如小提琴中所示https://jsfiddle.net/obn4yph0/embedded/result

Answer 1

一个想法是通过相对于容器的百分比值来定位，而不是像素值。

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

将像素转换为百分比的计算基于this answer by peteykun。
在 stop events 上执行计算以调整大小和拖动。

这是一个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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  <div class="overlay" id="overlay" />
</div>

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