css - jquery resize, keep comments position relative to image -

css - jquery resize, keep comments position relative to image -

jsfiddle

i created script allow users comment on top of image. img responsive comments on top of img , not. when resize, comments remain @ original top , left positions, , can not them maintain respective positions. uploaded jquery fiddle see. utilize help!

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

i'm guess math wrong, still can not figure out. need able go both ways

i confused why need javascript this? preventing letting browser hard work, , utilize css/html.

css block

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

html block

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

jquery css resize position