Estoy trabajando en elviolí en el que quiero mover / cambiar el tamaño de la imagen constantemente (que es en sí misma redimensionable / arrastrable) sobre el video cuando el navegador cambia el tamaño.

Los fragmentos de código HTML / CSS / JS que he usado son:

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

Planteamiento del problema

Me pregunto qué cambios debo hacer en el código JS anterior para que cada vez que cambio el tamaño del navegador, la imagen arrastrable / redimensionable también debe moverse constantemente.

Por ejemplo: supongamos que coloco lagoogle imagen sobre la nariz de un chico en pantalla completa y si cambio el tamaño de la ventana del navegador, laa imagen de @google no parece quedar por encima de la nariz como se muestra en el violínhttps: //jsfiddle.net/obn4yph0/embedded/resul