使用溢出滚动和中心在另一个div内缩放div

Question

我正在编写一个非常小的小功能，但我的滚动有问题。我需要用css缩放div缩放：

transform: scale(X,Y)

但我的问题是我在父div中没有​​正确的左侧和顶部滚动。每次用户按下按钮时，我都需要知道如何计算新的左侧和顶部。＃34;更多缩放＆＃34;，如果必须，我可以使用translate css属性。

我可以使用jQuery，但我认为这只是一个数学问题：）

一个细节：我需要图像从中心生长。

照片：

这是小提琴：

Fiddle example

Answer 1

我相信你也需要关注变换原点：

＆＃13;

＆＃13;

// get element references
var foo = document.querySelector('#foo');
var bar = document.querySelector('#bar');

// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js


var zoom = 1;
var trans = 50;
var moreZoom = document.querySelector('#moreZoom');
moreZoom.onclick = function(e){
console.log(foo);
     bar.style.transform = 'scale(' + (zoom + 0.1) + ',' + (zoom + 0.1) + ')';
     zoom = (zoom + 0.1);
     bar.style.transformOrigin = (50 / zoom) +'px  ' +(50 / zoom )+'px';
}

＆＃13;

#foo {
    background: #36D7B7;
    height: 200px;
    width: 400px;
    padding: 50px;
     overflow: auto;
    
}
#bar {
    background-image: url('http://www.space.com/images/i/000/028/001/original/wing-small-magellanic-cloud-galaxy-1920.jpg?interpolation=lanczos-none&fit=around%7C1440:900&crop=1440:900;*,*');
    background-size:cover;
    height: 100%;
    transform:scale(1);
    width: 100%;
   
}

＆＃13;

<script src="https://rawgithub.com/soulwire/fit.js/master/fit.js"></script>
<button id="moreZoom">
More Zoom
</button>

<div id="foo">
    <div

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/as20h6t4/5/