déplace constamment l’image redimensionnable / déplaçable sur la vidéo lorsque le navigateur est redimensionné

Je travaille sur le violon dans lequel je veux constamment déplacer / redimensionner l’image (qui est elle-même redimensionnable / image déplaçable) sur la vidéo lorsque le navigateur est redimensionné .

Les extraits de code HTML / CSS / JS que j’ai utilisés sont les suivants:

HTML:

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

Déclaration du problème:

Je me demande quels changements je devrais apporter au code JS ci-dessus afin que chaque fois que je redimensionne le navigateur, l’image déplaçable / redimensionnable soit également constamment déplacée .

Par exemple: supposons que je place l’ image google sur le nez d’un gars en plein écran et que si je redimensionne la fenêtre du navigateur, l’ image google ne semble pas restr sur le nez, comme indiqué dans le violon https: // jsfiddle .net / obn4yph0 / embedded / result

Une idée est de positionner en pourcentage par rapport au conteneur plutôt qu’en pixel.

De cette manière, le positionnement sera réactif, ce qui signifie que la position sera la même par rapport au conteneur, quelle que soit sa taille.

Les calculs pour convertir les pixels en pourcentages sont basés sur cette réponse de peteykun .
Les calculs sont effectués sur les événements d’ stop pour le redimensionnement et le déplacement.

Et voici un JSFiddle (puisque l’ intégration de YouTube ne fonctionne pas ici).

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