ImgViewer Fill Contents

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" 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" src="http://placehold.it/200x50" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.ContentWrapper {
    width:500px;
    height:300px;
    overflow:hidden;
    border: 1px solid #000;
}
.ImageWrapper {
    text-align:center;
    width:500px;
    height:300px;
    overflow:hidden;
    
}

.viewport{
    height:100% !important;
    max-height:300px;
}

#ZoomImage1, #ZoomImage2 {
    width:100%;
    
}