缩放div并相对移动子元素

Question

I need to scale a background image up or down and and also maintain the child divs inside them relative to the scale

The green squares should maintain their positions ( be aligned as they are initially to the image ) when i scale the parent div up or down

The green divs should not change their size.

Please let me know if you need more information

The JS fiddle is 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 Up </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
        });
    }

});

Answer 1

尝试设置CSS变换而不是高度和宽度：

transform: scale(x, y);