JQuery Panzoom Fit и центр

Question

Есть фиксированный контейнер, который служит в качестве окна просмотра моего контента. Содержание является <div> элемент фиксированного размера. Размер области просмотра привязан к окну и может измениться, если пользователь изменит размер окна. Я использую библиотеку jQuery.panzoom для управления панорамированием и масштабированием, чтобы позволить пользователю просматривать части содержимого, которые они хотят. Теперь мне нужны следующие функции и я не могу их найти:

• Содержание никогда не должно быть меньше, чем требуется, чтобы быть полностью видимым в области просмотра. Это, кажется, сделано с minScale вариант. Мне просто нужно подключить события изменения размера, чтобы обновить minscale значение тогда.
• Содержимое никогда не должно перетаскиваться к одному краю, если на противоположном краю будет свободное место. Это означает, что если контент достаточно мал, чтобы быть полностью видимым, он должен быть полностью видимым. Это должно быть центрировано так, чтобы содержимое всегда находилось на одной и той же позиции при уменьшении масштаба.

Это как средство просмотра изображений, которое изначально масштабирует изображение, чтобы подогнать его и отцентрировать. Пользователь может увеличивать, но не уменьшать дальше, чем первоначальный вид. Только то, что мой контент - это не изображение, а более сложный элемент HTML.

Вот что я сделал до сих пор:

<div id="room-wrapper" style="position: fixed; top: 0; left: 150px; right: 0; bottom: 0;">
    <div id="room" style="width: 800px; height: 600px;">
        Content here.
    </div>
</div>

<script>
    var roomWrapper = $("#room-wrapper");
    // Set up options
    var minScaleX = roomWrapper.innerWidth() / 800;
    var minScaleY = roomWrapper.innerHeight() / 600;
    var minScale = Math.min(minScaleX, minScaleY);
    var panzoom = $("#room").panzoom({
        startTransform: "scale(" + minScale + ")",
        minScale: minScale,
        //contain: "invert",
        increment: 0.1
    });
    // Compensate strange offset, doesn't work
    panzoom.panzoom("pan", 150, 0, {
        animate: false,
        silent: true
    });
    // Mouse wheel zooming
    panzoom.parent().on("mousewheel.focal", function (e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        panzoom.panzoom("zoom", zoomOut, {
            animate: true,
            focal: e
        });
    });
</script>

Контент изначально масштабируется правильно, но смещается где-то сверху и слева. Я понятия не имею, откуда это возмещение. Кроме того, нет никаких ограничений панорамирования. Закомментированный contain может быть связано, но я не понимаю ни одной из его документации.

Что мне нужно исправить в моем коде, чтобы он соответствовал вышеуказанным требованиям? Я думаю, что они довольно простые, и многим они понадобятся, но для этого нет примера.