2013-03-15 41 views
1

我想縮放(X)的子div元素,以適應窗口調整大小的父div。我通過除以父寬度和子寬度來計算比例尺,並且它完美地工作。動態計算css翻譯屬性值

但對齊不正確。最初我設置了我的子div邊距 - 從父div離開50 px。它不在規模上維護。

這是HTML/CSS代碼

#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.com/640/480" /> 
     </div> 
     </div>  
    </body> 

這是js代碼在大規模的調整

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

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

一些google搜索後,我才知道,我可以使用translateX屬性保持原來的對齊。但是我感到如何計算翻譯價值。

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

我把翻譯道具上的隨機值20%,它不正確。有人能幫助我怎麼理解這個價值。

這是jsfiddle test link

+1

不太清楚你想達到什麼樣的 - 你想確保利潤率保持其距左邊50px?如果是這樣,應用'-webkit-transform-origin:0 0;'到'#wrap'。 – Graham 2013-03-15 11:18:55

+1

其他解決方案,但不好:http://jsfiddle.net/4r8WZ/16/ – 2013-03-15 11:28:34

+0

@格拉漢姆,謝謝。那正是我想要的。請將其添加爲答案,以便我可以接受。 – RameshVel 2013-03-15 11:31:05

回答

5

你需要指定轉換原點;默認情況下,這是設置爲50%和0%,但是你可以用transform-origin財產像這樣覆蓋它:

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