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了一点，但我希望这是有道理的