jquery - Scale div and move child elements relatively -

i need scale background image or down , and maintain child divs inside them relative scale

the green squares should maintain positions ( aligned image ) when scale parent div or down

the green divs should not change size.

please let me know if need more information

the js fiddle here http://jsfiddle.net/87cmgp8a/

html

<div id="container">      <div id="imagecontainer">          <div id="square1" class="square"></div>         <div id="square2" class="square"></div>         <div id="square3" class="square"></div>      </div> </div> <br><br> <button id="scaleup">scale </button> <button id="scaledown">scale down </button> 

css

#container {     overflow: scroll;         height:350px;     width:350px; }  #imagecontainer {     background-image: url("http://www.portangelesschools.org/students/images/clip_image015.jpg");     background-repeat: no-repeat;     background-size: cover;     position: relative;     height:400px;     width: 400px; }  .square {     border: 1px solid;     background-color: green;     width: 35px;     height: 35px;     position: absolute; }  #square1{ top: 8px; left: 87px; } #square2{ top: 88px; left: 87px; } #square3{ top: 165px; left: 87px; } 

js

var $imagecontainer = $("#imagecontainer"); var scalefactor = 50;  $("button").click(function(){      var id = $(this).attr("id");     if( id === "scaleup" ) {         $imagecontainer.css({             height: $imagecontainer.height() + scalefactor,              width: $imagecontainer.width() + scalefactor         });     }     else {         $imagecontainer.css({             height: $imagecontainer.height() - scalefactor,              width: $imagecontainer.width() - scalefactor         });     }  }); 

try setting css transform instead of height , width:

transform: scale(x, y);