Нужно чтобы изображение было в одинаковом положении в обоих div

Question

Мне нужно, чтобы изображение в обоих разделах ниже находилось в одной и той же позиции, даже если другой раздел изменяет высоту или ширину. Я попытался вычислить top и left в% от px, но все равно он не работает. Я также попытался вычислить% того, насколько большой или маленький другой div и добавил или удалил верхнюю и левую сторону изображения в другом div, но все еще не повезло.

Чтобы проверить проблему, перетащите изображение внутри первого элемента div и нажмите «Отправить». Теперь изображение внутри нижнего элемента div должно быть в том же положении, что и вышеуказанный элемент div, то же самое расстояние сверху и слева.

Пожалуйста, помогите. Спасибо.

Вот скрипка: https://jsfiddle.net/kashyap_s/gLdt62nh

var zoomLevel = 1;

$("#myimage").draggable({
  start: function() {
  },
  stop: function() {
  }
});

$('#save').click(function() {
  var topcss = $('#myimage').css('top');
  var leftcss = $('#myimage').css('left');
  var transformcss = zoomLevel;

  topcss = topcss.replace('px', '');
  leftcss = leftcss.replace('px', '');
  topcss = parseInt(topcss);
  leftcss = parseInt(leftcss);
  var parentWidth = $('#dragDiv').outerWidth()
  var parentHeight = $('#dragDiv').outerHeight()
  console.log('leftcss', leftcss, 'width', parentWidth)
  console.log('topcss', topcss, 'height', parentHeight)
  var percentLeft = leftcss / parentWidth * 100;
  var percentTop = topcss / parentHeight * 100;
  console.log('percentLeft', percentLeft, 'percentTop', percentTop)

  transformcss = parseFloat(transformcss).toFixed(2);
  var result = {
    "top": topcss,
    "left": leftcss,
    'percentTop': percentTop,
    'percentLeft': percentLeft,
    'parentWidth': parentWidth,
    'parentHeight': parentHeight,
    "transform": "scale(" + transformcss + ")"
  };
  var output = JSON.stringify(result);
  console.log('output', output)
  $("#newimg").css({
    'left': leftcss
  });
  $("#newimg").css({
    'top': topcss
  });
});

.transperentimage {
  width: 497px;
  height: 329px;
  border: 1px solid black;
  margin: 0 auto;
}

#bigimg {
  width: 651px;
  height: 431px;
  border: 1px solid black;
  margin: 0 auto;
}

img {
  border: 2px solid red;
  padding: 3px;
  width: auto;
  height: auto;
  cursor: move;
  max-height: 180px;
}

#newimg {
  position: absolute;
  max-height: 180px;
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transperentimage" id="dragDiv">
  <img id="myimage" src="agent.png">
</div>
<button id="save">Save</button>

<div id="bigimg">
  <img id="newimg" src="agent.png" />
</div>

Answer 1

$(function() {

  $("#logo1").draggable({
    containment: "parent",
    drag: function() {


    }
  });
});


function setpos() {
  var image1_w = $("#logo1").width();
  var div1_w = $(".div1").width();
  var image2_w = $("#logo2").width();
  var div2_w = $(".div2").width();
  var image1_h = $("#logo1").height();
  var div1_h = $(".div1").height();
  var image2_h = $("#logo2").height();
  var div2_h = $(".div2").height();



  var div1_aw = div1_w - image1_w;
  var div2_aw = div2_w - image2_w;
  var div1_ah = div1_h - image1_h;
  var div2_ah = div2_h - image2_h;


  var div

  var xPos = $('#logo1').css('left');
  var yPos = $('#logo1').css('top');
  var ratio_w = parseFloat(div1_aw) / parseFloat(div2_aw);
  var ratio_h = parseFloat(div1_ah) / parseFloat(div2_ah);
  //let act = 1.39;



  var div2_nw = parseFloat(xPos) / ratio_w;
  var div2_nh = parseFloat(yPos) / ratio_h;
  $("#posX").text('Div left:' + div2_nw);
  $("#posA").text('Div Top:' + div2_nh);
  $("#logo2").css({
    'left': div2_nw,
    'top': div2_nh
  });
}

.div1 {
  width: 497px;
  height: 329px;
  border: 1px solid black;
}

.div2 {
  width: 651px;
  height: 431px;
  border: 1px solid black;
}

Решено! проверить это

HTML

JS КОД

 $( function() {

    $( "#logo1" ).draggable(
    {
      containment: "parent",
     drag: function() {


    }
    }
    );
  } );


  function setpos()
  {
   var image1_w = $("#logo1").width();
        var div1_w = $(".div1").width();
        var image2_w = $("#logo2").width();
        var div2_w = $(".div2").width();
         var image1_h = $("#logo1").height();
        var div1_h = $(".div1").height();
        var image2_h = $("#logo2").height();
        var div2_h = $(".div2").height();



        var div1_aw = div1_w-image1_w;
        var div2_aw = div2_w-image2_w;
        var div1_ah = div1_h-image1_h;
        var div2_ah = div2_h-image2_h;


        var div

        var xPos = $('#logo1').css('left');
        var yPos = $('#logo1').css('top');
            var ratio_w = parseFloat(div1_aw)/parseFloat(div2_aw);
      var ratio_h = parseFloat(div1_ah)/parseFloat(div2_ah);
          //let act = 1.39;



          var div2_nw = parseFloat(xPos)/ratio_w;
           var div2_nh = parseFloat(yPos)/ratio_h;
                 $("#posX").text('Div left:' + div2_nw);
         $("#posA").text('Div Top:' + div2_nh);
        $("#logo2").css({ 'left' : div2_nw, 'top' : div2_nh});
  }

CSS

.div1{
  width: 497px;
  height: 329px;
  border: 1px solid black;
}
.div2{
  width: 651px;
  height: 431px;
  border: 1px solid black;
}

ПРОВЕРКА jsfiddle

https://jsfiddle.net/hasim751/gz0k6avL/108/

Answer 2

Для вашего newimg родитель должен иметь position, то есть relative. Таким образом, позиционирование absolute будет относиться к родителю, а не body.

Элемент с position: absolute; позиционируется относительно ближайшего позиционированного предка (вместо позиционирования относительно область просмотра, как фиксированный).

Рассмотрим следующий код.

$(function() {
  var zoomLevel = parseFloat(1 - ($("#dragDiv").outerWidth() / $("#bigimg").outerWidth()).toFixed(2));

  function log(str) {
    if ($(".log").length) {
      $(".log").html(str);
    } else {
      $("<div>", {
        class: "log"
      }).html(str).appendTo("body");
    }
  }

  function getPos(el) {
    var par = $(el).parent();
    var pos = {
      top: parseInt($(el).css("top")),
      left: parseInt($(el).css("left")),
      zoom: "scale(" + (1 + zoomLevel) + ")",
      parWidth: par.outerWidth(),
      parHeight: par.outerHeight()
    };
    pos['perLeft'] = parseFloat((pos.left / pos.parWidth).toFixed(2)) * 100;
    pos['perTop'] = parseFloat((pos.top / pos.parHeight).toFixed(2)) * 100;

    return pos;
  }

  $("#myimage").draggable({
    containment: "parent",
    drag: function(e, ui) {
      log("Left: " + ui.position.left + ", Top: " + ui.position.top);
    },
    start: function() {
      // coordinates('#myimage');
    },
    stop: function() {
      // coordinates('#myimage');
      var p = getPos(this);
      $(this).attr("title", JSON.stringify(p));
    }
  });

  $('#save').click(function() {
    var result = getPos($("#myimage"));
    var output = JSON.stringify(result);
    var nLeft = Math.round(result.perLeft * (1 + zoomLevel)) + "%";
    var nTop = Math.round(result.perTop * (1 + zoomLevel)) + "%"
    console.log(output, nLeft, nTop);
    $("#newimg").css({
      left: nLeft,
      top: nTop
    });
    var p = getPos($("#newimg"));
    $("#newimg").attr("title", JSON.stringify(p));
  });
});

.transperentimage {
  width: 497px;
  height: 329px;
  border: 1px solid black;
  margin: 0 auto;
}

#bigimg {
  width: 651px;
  height: 431px;
  border: 1px solid black;
  margin: 0 auto;
  position: relative;
}

img {
  border: 2px solid red;
  padding: 3px;
  width: auto;
  height: auto;
  cursor: move;
  /* max-width: 100%; */
  max-height: 180px;
}

#newimg {
  position: absolute;
  max-height: 180px;
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
}

.log {
  font-size: 11px;
  font-family: "Arial";
  position: absolute;
  top: 3px;
  left: 3px
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="transperentimage" id="dragDiv">
  <img id="myimage" src="https://i.imgur.com/4ILisqH.jpg">
</div>
<button id="save">Save</button>

<div id="bigimg">
  <img id="newimg" src="https://i.imgur.com/4ILisqH.jpg" />
</div>

Подробнее: https://www.w3schools.com/css/css_positioning.asp

Обновлено

Глядя на это дальше, я предполагаю, что вы, возможно, пытаетесь изменить положение bigimg относительно позиции myimage. Это требует масштабирования процента.

Например, если мы переместим myimage в крайнее левое положение, оно будет на left: 247, и это примерно 49% от 499 пикселей. 49% из 653 - это около 319, и это не поместит изображение туда, где мы хотим. Мы хотим получить значение 401.

bigimg примерно на 24% больше, чем dragDiv, поэтому нам нужно масштабировать наш процент. 49 * 1.24 = 60.74, округлить до 61. 653 * .61 = 398.33 так лучше, но не идеально.