chemitaxis chemitaxis - 1 month ago 9
CSS Question

Scale div inside another div with overflow scroll and center

I'm coding a very tiny small feature, but I'm having problems with the scroll. I need to do a zoom of a div scaling with css:

transform: scale(X,Y)

But my problem is that I don't have a correct left and top scroll in the parent div. I need to know how to calculate the new left and top each time the user press the button "More zoom", I could use translate css property if it is mandatory.

I can use jQuery, but I think this is just a math problem :)

One detail: I need that the image grow from the center.


enter image description here

Here is the fiddle:

Fiddle example


i believe you need to mind transform-origin too:

// 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

var zoom = 1;
var trans = 50;
var moreZoom = document.querySelector('#moreZoom');
moreZoom.onclick = function(e){
console.log(foo); = 'scale(' + (zoom + 0.1) + ',' + (zoom + 0.1) + ')';
     zoom = (zoom + 0.1); = (50 / zoom) +'px  ' +(50 / zoom )+'px';
#foo {
    background: #36D7B7;
    height: 200px;
    width: 400px;
    padding: 50px;
     overflow: auto;
#bar {
    background-image: url(';*,*');
    height: 100%;
    width: 100%;
<script src=""></script>
<button id="moreZoom">
More Zoom

<div id="foo">