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

Question

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

我使用的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>

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