jQuery / CSS仅缩放div内容

Question

我想放大div的内容，但我希望div保持位置和高度/宽度，无论它的缩放级别如何。

我做了这个小提琴：http://jsfiddle.net/fD7L7/5/

问题是，我想放大/缩小的div充当了许多可拖动的容器。

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的溢出属性（在此示例中为scroll）创建固定大小容器的外观，其内容可放大和缩小。

.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中对你的原始代码进行了一些屠杀，但希望它有意义。