mueva constantemente la imagen redimensionable / arrastrable en el video cuando el navegador cambie de tamaño
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