admin管理员组

文章数量:1384394

I am trying to scale(X) the child div element to fit the parent div on window resize. I calculated the scale ratio by dividing the parent width and child width, and it works perfectly.

But alignment is not proper. Initially i set my child div margin-left 50 px from the parent div. Its not maintained on the scale.

This is the HTML/css code

#wrap {
    margin-left:50px;
    width:300px;
    height:300px
}
#parentDiv {
    width:500px
        height:300px;
}

    <body>
        <div id="parentDiv">
        <div id="wrap">           
            <img id="image" width="300px" src="" />
        </div>
        </div>      
    </body>

And this is the js code to scale on resize

 window.onresize = function() {
    scaleDiv();
  };

scaleDiv = function() {
    parentWidth = $('#parentDiv').width();
    scale = (parentWidth) / $('#wrap').width();
    new_width = $('#wrap').width() *     scale;
    $('#wrap').css('-webkit-transform', ' scaleX(' + scale + ')');
}

After some googling, i came to know that i can use translateX property to keep the alignment as original. But i am struck at how to calculate the translate value. 

  $('#wrap').css('-webkit-transform', 'translateX(20%)' + ' scaleX(' + scale + ')');

i put random value 20% on translate prop, its not proper. Can someone help me how to caclulate this value propery.

This is the jsfiddle test link

I am trying to scale(X) the child div element to fit the parent div on window resize. I calculated the scale ratio by dividing the parent width and child width, and it works perfectly.

But alignment is not proper. Initially i set my child div margin-left 50 px from the parent div. Its not maintained on the scale.

This is the HTML/css code

#wrap {
    margin-left:50px;
    width:300px;
    height:300px
}
#parentDiv {
    width:500px
        height:300px;
}

    <body>
        <div id="parentDiv">
        <div id="wrap">           
            <img id="image" width="300px" src="http://placekitten./640/480" />
        </div>
        </div>      
    </body>

And this is the js code to scale on resize

 window.onresize = function() {
    scaleDiv();
  };

scaleDiv = function() {
    parentWidth = $('#parentDiv').width();
    scale = (parentWidth) / $('#wrap').width();
    new_width = $('#wrap').width() *     scale;
    $('#wrap').css('-webkit-transform', ' scaleX(' + scale + ')');
}

After some googling, i came to know that i can use translateX property to keep the alignment as original. But i am struck at how to calculate the translate value. 

  $('#wrap').css('-webkit-transform', 'translateX(20%)' + ' scaleX(' + scale + ')');

i put random value 20% on translate prop, its not proper. Can someone help me how to caclulate this value propery.

This is the jsfiddle test link

  • javascript
  • css
  • transform
  • scale
Share Improve this question asked Mar 15, 2013 at 10:47 RameshVelRameshVel 65.9k32 gold badges172 silver badges213 bronze badges 3
  • 1 Not quite sure what you're trying to achieve - are you trying to ensure the margin maintains its 50px from left? If so, apply -webkit-transform-origin:0 0; to #wrap. – Graham Commented Mar 15, 2013 at 11:18
  • 1 other solution but not nice: jsfiddle/4r8WZ/16 – Thomas Durieux Commented Mar 15, 2013 at 11:28
  • @Graham, thanks. thats exactly what i wanted. pls add it as answer so i can accept. – RameshVel Commented Mar 15, 2013 at 11:31
Add a ment  | 

1 Answer 1

Reset to default 6

You need to specify the transform origin; by default this is set to 50% and 0%, but you can override it with the transform-origin property like so:

#wrap {
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}

本文标签： javascriptCalculate css translate property value on scale dynamicallyStack Overflow

版权声明：本文标题：javascript - Calculate css translate property value on scale dynamically - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744528313a2610877.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。