Question

我需要向上或向下缩放背景图像，并且还要相对于比例维护其中的子div

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

绿色div不应改变它们的大小。

如果您需要更多信息，请与我们联系

HTML

#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; }

CSS

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

});

JS

    //$scope.myElem = angular.element('testDiv'); //this breaks angular
    $scope.myElem = $document.find('testDiv'); //this doesn't break angular, but unclear what it returns
    $scope.myAttr = $scope.myElem.name; //this returns nothing

Answer 1

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

transform: scale(x, y);

缩放div并相对移动子元素

1 个答案: