jQuery的调整大小，相对位置保持注释图像

我创建了一个脚本，允许用户对图像的顶部发表评论。该img是响应式的，但在IMG顶部的意见，而不是。当我调整大小时，评论留在原来的顶部和左侧位置，我无法让他们保持各自的位置。我上传了一个jquery小提琴给你看。我真的可以用你的帮助！

var oldHeight = $('#proofNow').height(), 
    oldWidth = $('#proofNow').width(); 

$(window).resize(function() { 
    var parent = $('#proofNow'), 
     parentWidth = parent.width(), 
     parentHeight = parent.height(); 

    $("img.TDot").each(function(){ 
     var top = parseInt($(this).css("top")), 
      left = parseInt($(this).css("left")), 
      topRatio = oldHeight/top, 
      leftRatio = oldWidth/left, 
      newTop = parentHeight/topRatio, 
      newLeft = parentWidth/leftRatio; 

     //console.log('top: ' + top + ', left: ' + left); 
     $(this).css("top", newTop); 
     $(this).css("left",newLeft); 
    }); 

    console.log(parent.width()); 
});

我想我的数学是错误的，但我仍然无法弄清楚。我需要能够两种方式

来源

2014-10-09 Chris Cloyd

我很困惑为什么你需要使用Javascript？什么阻止了你让浏览器做了艰苦的工作，并且使用了CSS/Html。

的CSS块

div { 
    position: relative; 
    left: 0px; 
    top: 0px; 
    width="60%" 
}

的HTML文本块

<div> 
    <div name="comments"> ... </div> 
    <img src="..." /> 
</div>

来源

2014-10-09 22:45:44

所有主要div有相对的位置，所有的意见都设置为绝对的，但他们仍然不动，并保持相对位置。 – 2014-10-09 22:48:20

考虑到这一点，布局的改变大部分可以通过CSS和HTML完成。无视发布的实际css规则，你应该能够想出一个html布局和css规则集来实现你正在寻找的风格。 – 2014-10-10 00:12:55

jQuery的调整大小，相对位置保持注释图像

回答

相关问题