javascript - 基于另一个元素缩放元素

Question

我通过以下方式将元素定位在 am img 之上:

<div style={{  display: "inline-block", position: "relative" }} >
         <img /> 
         <div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0, width: "100%", height: "100%" }} > 
                 <child elements I'm trying to position />
           </div>    
    </div>

子元素使用 top、left、width、height 属性将它们自己定位在图像的顶部。

我试图让它们随图像缩放(- 当图像的宽度和高度发生变化时，我希望它们保持在同一位置并随图像缩放):

width: Math.round(((box.x2 - box.x1) / imgWidth) * 100) + "%",
height: Math.round(((box.y2 - box.y1) / imgHeight) * 100)  + "%",
left: Math.round((box.x1 / imgWidth) * 100)  + "%",
top: Math.round((box.y1 / imgHeight) * 100)  + "%"

但是使用百分比的结果与仅使用坐标的结果有些偏差。

有没有更好的方法来定位元素(框)以便它们随图像缩放？我使用的公式有问题吗？

编辑:例如:

正方形是我提到的子元素，当用户放大或缩小页面时，或者如果图像的大小发生变化，我希望保留正方形在图像上的位置，并且它们的比例与图像的比例相匹配

Answer 1

好的，所以这可能不适合您的元素，但您应该能够通过一些调整使其正常工作。

使用一些 JavaScript 来计算子元素的绝对定位百分比。

var imgWrapper = document.getElementById("wrapper");
var children = document.getElementsByClassName("child");

window.onresize = function(event) {
  var imgWidth  = imgWrapper.offsetWidth;
  var imgHeight = imgWrapper.offsetHeight;

  for (var i = 0; i < children.length; i++)
  {
    // - Current child element
    var child = children.item(i);

    // - Child positions
    var currentTop = child.offsetTop;
    var currentLeft = child.offsetLeft;
    var currentBottom = imgHeight - (currentTop + child.offsetHeight);
    var currentRight = imgWidth - (currentLeft + child.offsetWidth);

    var newTop = (100 * currentTop / imgHeight);
    var newLeft = (100 * currentLeft / imgWidth);
    var newBottom = (100 * currentBottom / imgHeight);
    var newRight = (100 * currentRight / imgWidth);

    child.style.top = newTop + "%";
    child.style.left = newLeft + "%";
    child.style.bottom = newBottom + "%";
    child.style.right = newRight + "%";
  }
};

http://next.plnkr.co/edit/E8RbqFTClYklW4w7