缩放 div 并相对移动子元素

Question

我需要放大或缩小背景图像，并保持其中的子 div 相对于比例

当我向上或向下缩放父 div 时，绿色方块应该保持它们的位置（与它们最初与图像对齐）

绿色 div 不应更改其大小。

如果您需要更多信息，请告诉我

JS 小提琴在这里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);