How to adjust the modal according to the image rotation

See more:

.NET

jQuery

CSS3

HTML5

bootstrap

, +

I have a modal to preview image and we can rotate it in the preview. It works perfect with same width and height of an image but with different it behaves weird. Please guide me through some pointers on how to resolve this issue.

Image on rotate works perfect -> Rotated Image
But
This Image on rotate cover the modal -> Image Issue

Html Code:

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="imageModalLabel">Image Preview</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img class="modal-content-img normal" id="img01" style="z-index : -1"><br />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="caption">Rotate</button>
                            <button type="submit" class="btn btn-primary" id="modalSave">Save changes</button>
                            <button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

What I have tried:

I tried searching but could not find anything proper. I tried messing around with Css but no result.