jQuery panzoom fit and center

Question

There's a fixed container that serves as the viewport to my content. The content is a <div> element of a fixed size. The viewport size is bound to the window and may change if the user resizes the window. I'm using the jQuery.panzoom library to handle panning and zooming to let the user view the parts of the content they want. Now I need the following features and can't find them:

• The content must never be smaller than required to be completely visible within the viewport. This seems to be done with the minScale option. I just need to wire up the resize events to update the minscale value then.
• The content must never be dragged out to one edge if there would be an empty space on the opposite edge. That means, if the content is small enough to be completely visible, it must be completely visible. This must be centered so that the content is always at the same position when zoomed out.

It's like a picture viewer that initially zooms the image to fit and centers it. The user can zoom in, but not zoom out further than the initial view. Only that my content is not an image but a more complex HTML element.

Here's what I've done so far:

<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>

The content is initially zoomed correctly, but offset somewhere to the top and left. I have no idea where that offset comes from. Also, there's no panning contraint yet. The commented out contain may be related but I don't understand any of its documentation.

What do I need to fix in my code to make it meet the above requirements? I guess these are pretty basic and many people would need them but there's no example for that.