@john Извините, я ушел домой прошлой ночью. Я основал HTML на вашем JSFiddle. Мои извинения, я не уверен, что вы спрашиваете.
отаю надиграть на скрипке в котором я хочупостоянно перемещать / изменять размер изображения (само изображение с изменяемым размером / перетаскиваемым изображением) поверх видео при изменении размера браузера.
Фрагменты кода 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