图片处理问题

//css与引用
@section Styles{
    <link href="/Content/plugins/Swiper-3.4.2/dist/css/swiper.min.css" rel="stylesheet" />
    <style>
        .headgd {
            display: inline-block;
        }

        .scrolltr {
            max-height: 300px;
            overflow: scroll;
            display: inline-block;
        }

            .scrolltr::-webkit-scrollbar { /*滚动条整体样式*/
                 0px; /*高宽分别对应横竖滚动条的尺寸*/
            }

        .expireMember {
            background-image: url(/Content/dist/img/ExpireMember.png);
             27px;
            height: 27px;
            background-position: center;
            background-size: cover;
            margin: 0 auto;
        }

        .expireMemberActive {
            background-image: url(/Content/dist/img/ExpireMemberActive.png);
        }

        .aOpenCard:hover {
            background-color: #59A2FF;
            color: #ffffff;
        }
    </style>
}

function showPic(clubKey,userKey) {
            btns = [
                {
                    label: '<i class="fa fa-check"></i> 确定',
                    action: function (dialog) {
                        dialog.close();
                    }
                }
            ];
            $.ajax({
                type: 'post',
                data: { clubKey: clubKey, userKey: userKey },
                url: '@Url.Action("GetMemberContracts")',
                success: function (model)
                {
                    var data = new Object();
                    for (var i = 0; i < model.memberContracts.length; i++) {
                        if (model.memberContracts[i].Images != "" && model.memberContracts[i].Images != null) {
                            if (data.imgs != undefined) {
                                var imgs = model.memberContracts[i].Images.split("|");
                                for (var j = 0; j < imgs.length; j++) {
                                    data.imgs.push(imgs[j]);
                                }
                            } else {
                                data.imgs = model.memberContracts[i].Images.split("|");
                            }
                            
                        }
                    }
                    if (data.imgs == undefined) {
                        data.noimgs = true;
                    }
                    gym.Dialog("imgs", "file-text-o", "合同图片", "ContractImgs", data, btns, OnShownForSwiper);
                }
            })
            
        }

<script type="text/x-jquery-tmpl" id="ContractImgs">

        <div>

            <!-- Swiper -->

            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                    <input type="hidden" id="noimgs" value="0"/>
                    {{if noimgs}}
                    <div class="nothing" style="height:200px;padding-top:35px;inherit"><i class="fa fa-smile-o" style="margin-bottom: 7px;display: block;"></i></div>
                    {{else}}
                    {{each imgs}}
                    <div class="swiper-slide my-slide  swiper-no-swiping">
                        @*<img id="rotateImg" class="swiper-slide rotateImg" src="{{= $value}}" />*@
                        <img id="rotateImg" class="swiper-slide rotateImg" style="450px;height:450px;" src="{{= $value}}" onclick="openImg(this)" />
                    </div>
                    {{/each}}
                    {{/if}}
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="swiper-container gallery-thumbs">
                {{if noimgs}}
                {{else}}
                <div style="padding-left: 43%; padding-bottom: 5%; padding-top: 3%;">
                    <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" onclick="Rotate(-90)" title="左转,90度">
                        <span class="docs-tooltip" data-toggle="tooltip" title="">
                            <span class="fa fa-rotate-left"></span>
                        </span>
                    </button>
                    <button class="btn btn-primary" data-method="rotate" data-option="90" type="button" onclick="Rotate(90)" title="右转,90度">
                        <span class="docs-tooltip" data-toggle="tooltip" title="">
                            <span class="fa fa-rotate-right"></span>
                        </span>
                    </button>
                </div>
                {{/if}}
             
                <div class="swiper-wrapper">
                    {{each imgs}}
                    <div class="swiper-slide my-slide rotateZoomImg" style="200px;height:200px;">
                        <img class="swiper-slide" src="{{= $value}}" />
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </script>

function OnShownForSwiper() {
 //初始化
            var galleryTop = new Swiper('.gallery-top',
            {
                slideClass: 'my-slide',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                spaceBetween: 10,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
            });
            var galleryThumbs = new Swiper('.gallery-thumbs',
            {
                slideClass: 'my-slide',
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: 'auto',
                touchRatio: 0.2,
                slideToClickedSlide: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
            });
            galleryTop.params.control = galleryThumbs;
            galleryThumbs.params.control = galleryTop;

            //初始化cropper插件
            $('.rotateImg').width(450);
            $('.rotateImg').height(450);
            $('.rotateZoomImg').width(200);
            $('.rotateZoomImg').height(200);
        }

无图效果：

有图效果：

 点击合同出现图示效果