需要图像在两个 div 中的相同位置

Question

即使另一个 div 改变高度或宽度，我也需要下面两个 div 中的图像处于相同位置。我尝试从 px 计算 top 和 left 到 % ，但它仍然无法正常工作。我还尝试计算其他 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<p>Drag my logo.</p>




<div class="div1">
  <img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
  <img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>

<br>
<button onclick="setpos();">
Save
</button>
<div id="posX">

</div>
<div id="posA">

</div>

<div id="posz">

</div>
<div id="posZ1">

</div>

解决了！看看这个

HTML

  <p>Drag my logo.</p>

<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100"  id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg"  width="100"  id="logo2">
</div>

<br>
<button onclick="setpos();">
Save
</button>
<div id="posX"></div>
<div id="posA"></div>

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

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，这大约是 499 像素的 49%。 653 的 49% 大约是 319，这不会将图像放置在我们想要的位置。我们希望它位于 401。

bigimg 比dragDiv 大约大 24%，因此我们需要调整百分比。 49 * 1.24 = 60.74，四舍五入到 61。653 * .61 = 398.33 更好但并不完美。