jQuery/CSS縮放div內容

Question

我想放大一個div的內容，但我希望div保持位置和高度/寬度，而不管它的縮放級別如何。

我做了這個小提琴： http://jsfiddle.net/fD7L7/5/

的事情是，我要放大/縮小充當一些拖拽元素的容器股利。

Halp？

var currZoom = 1; 

$(".zoomIn").click(function(){ 
    currZoom+=0.1; 
    $('.board').css(
    { 
     'position' : 'absolute', 
     'top' : '45px', 
     'left' : '20px', 
     'height' : $(window).height()-65, 
     'width' : $(window).width()-40, 
     'zoom' : currZoom 
    }); 
}); 

$(".zoomOff").click(function() 
{ 
    currZoom=1; 
    $(".board").css(
    { 
     'position' : 'absolute', 
     'top' : '45px', 
     'left' : '20px', 
     'height' : $(window).height()-65, 
     'width' : $(window).width()-40, 
     'zoom' : currZoom 
    }); 
}); 

$(".zoomOut").click(function() 
{ 
    currZoom-=0.1; 
    $('.board').css(
    { 
     'position' : 'absolute', 
     'top' : '45px', 
     'left' : '20px', 
     'height' : $(window).height()-65, 
     'width' : $(window).width()-40, 
     'zoom' : currZoom 
    }); 
}); 

Answer 1

嘗試是這樣的：http://jsfiddle.net/vaFQ9/

<div class='outboard'> 
    <div class="board"> 
     <div class="draggable"></div> 
    </div> 
</div> 

的絕對定位的容器的div（ '.outboard '），和一個相對定位的div內（' .board'）。容器div的溢出屬性（在本例中爲滾動）將創建一個固定大小容器的外觀，其中的內容放大和縮小。

.outboard 
{ 
    position: absolute; 
    top: 45px; 
    left: 45px; 
    width: 80%; 
    height: 80%; 
    padding: 0px; 
    border: 1px solid black; 
    overflow: scroll; 
} 

.board 
{ 
    background-color: #334433; /* not actually relevant */ 
} 

的.outboard元件中可指定的頁面上的視在位置/塊屬性和.board元件開始作爲一個相同大小的div（您可能需要擺弄填充和利潤以確保他們沖洗開始與

我宰了你原來代碼中的jsfiddle了一點，但我希望這是有道理的