ImgViewer Fill Contents Modifiy Height

by TheFiddler

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<h1>Image Gets Clipped</h1>

<div class="ContentWrapper">
    <div class="Panel">
        <div class="TopWrapper">
            <div class="MainContent">
                <div class="ImageWrapper">
                    <img id="ZoomImage1" class="hide-me" src="http://placehold.it/380x450" />
                </div>
            </div>
        </div>
    </div>
</div>

<h1>Image Displays Fine</h1>

<div class="ContentWrapper">
    <div class="Panel">
        <div class="TopWrapper">
            <div class="MainContent">
                <div class="ImageWrapper">
                    <img id="ZoomImage2" class="hide-me" src="http://placehold.it/200x50" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.ContentWrapper {
    width:400px;
    height:300px;
    overflow:hidden;
    border: 1px solid #000;
}
.ImageWrapper {
    position:relative;
    width:400px;
    height:300px;
    overflow:hidden;
}
.viewport {
    max-height:300px;
    max-width:500px;
}
#ZoomImage1, #ZoomImage2 {
    width:100%;
}

JavaScript

/* jQuery imgViewer - v0.6.0 - 2013-06-06
 https://github.com/waynegm/imgViewer
 Copyright (c) 2013 Wayne Mogg; Licensed MIT */
;
(function ($) {
    $.widget("wgm.imgViewer", {
        options: {
            zoomStep: 0.1,
            zoom: 1,
            onClick: null,
            onUpdate: null
        },

        _create: function () {
            var self = this;
            if (!this.element.is("img")) {
                $.error('imgviewer plugin can only be applied to img elements');
            }
            //		the original img element

            self.img = self.element[0];
            var $img = $(self.img);
            /*
             *		a copy of the original image to be positioned over it and manipulated to
             *		provide zoom and pan
             */
            self.zimg = $("<img/>", {
                "src": self.img.src
            }).appendTo("body").wrap("<div class='viewport'/>");
            var $zimg = $(self.zimg);
            //		the container or viewport for the image view
            self.view = $(self.zimg).parent();
            var $view = $(self.view);
            this.$oldview = $img.parent();
            //		the pixel coordinate of the original image at the center of the viewport
            self.vCenter = {};
            //		a flag used to decide if a mouse click is part of a drag or a proper click
            self.dragging = false;
            //		a flag used to check the target image has loaded
            self.ready = false;
            $img.one("load", function () {
                //			get and some geometry information about the image
                self.ready = true;
                var width = $img.width(),
                    height = $img.height(),
                    offset = $img.offset();

                //HACK if it is a tall image, resize it to fit
                var ih = height,
                    iw = width;

                if (height > width) {
                    var ratio = $view.height() / height;
...