<img id="preview-image" src="{{ url }}" width="{{ asset.width }}" height="{{ asset.height }}" data-maxWidth="{{ asset.width }}" data-maxHeight="{{ asset.height }}" onload="resizePreviewImage()" />

{% js %}
function resizePreviewImage() {
    var instance = Craft.PreviewFileModal.openInstance;
    var containerHeight = Garnish.$win.height() * 0.66;
    var containerWidth = Math.min(containerHeight / 3 * 4, Garnish.$win.width() - instance.settings.minGutter * 2);
    containerHeight = containerWidth / 4 * 3;

    var $img = instance.$container.find('img');

    $img.css({
        width: containerWidth,
        height: containerHeight
    });

    if (instance.loaded && $img.length) {
        // Make sure we maintain the ratio

        var maxWidth = $img.data('maxwidth'),
            maxHeight = $img.data('maxheight'),
            imageRatio = maxWidth / maxHeight,
            desiredWidth = instance.desiredWidth ? instance.desiredWidth : instance.getWidth(),
            desiredHeight = instance.desiredHeight ? instance.desiredHeight : instance.getHeight(),
            width = Math.min(desiredWidth, maxWidth),
            height = Math.round(Math.min(maxHeight, width / imageRatio));

        width = Math.round(height * imageRatio);

        $img.css({'width': width, 'height': height});
        instance._resizeContainer(width, height);

        instance.desiredWidth = width;
        instance.desiredHeight = height;
    }

    instance.base();

    if (instance.loaded && $img.length) {
        // Correct anomalities
        var containerWidth = Math.round(Math.min(Math.max($img.height() * imageRatio), Garnish.$win.width() - (instance.settings.minGutter * 2))),
            containerHeight = Math.round(Math.min(Math.max(containerWidth / imageRatio), Garnish.$win.height() - (instance.settings.minGutter * 2)));
        containerWidth = Math.round(containerHeight * imageRatio);

        // This might actually have put width over the viewport limits, so doublecheck that
        if (containerWidth > Math.min(containerWidth, Garnish.$win.width() - instance.settings.minGutter * 2)) {
            containerWidth =  Math.min(containerWidth, Garnish.$win.width() - instance.settings.minGutter * 2);
            containerHeight = containerWidth / imageRatio;
        }

        instance._resizeContainer(containerWidth, containerHeight);

        $img.css({'width': containerWidth, 'height': containerHeight});
    }
}
{% endjs %}
