jQuery / CSS 仅缩放 div 内容

Question

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

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

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

停下来？

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 中对您的原始代码做了一些改动，但希望它是有意义的。