点击图片，放大/缩小图片

 小图片代码：

 <div class="row">
              <div class="col-lg-3"></div>
              <div class="col-lg-9">
                <div class="form-group" *ngIf="xqobj.wgzpUrl">
                  <div class="col-lg-12">
                    <span style="display: inline-block;margin-right: 20px;margin-bottom: 20px"
                          (click)="showBigImg(xqobj.wgzpUrl)">
                      <img [src]="xqobj.wgzpUrl" alt="设备标签" class="imgSize" style="cursor: -webkit-zoom-in;cursor: -moz-zoom-in;cursor: zoom-in;"/>
                    </span>
                  </div>
                </div>
              </div>
            </div>

放大后代码

 <div class="modal fad" id="imgModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel3">
      <div class="modal-dialog " role="document" >
        <div class="modal-content" >
          <div style="padding: 0px;">
            <img [src]="bigimgurl" (click)="hideBigImg()" alt="考生图片" style="cursor: -webkit-zoom-out;cursor: zoom-out;width: 100%;min-width: 598px" />
          </div>
        </div>
      </div>
    </div>

 样式

  ".imgSize{width:100px;height:100px;}",
    "#imgModal .modal-dialog { position: absolute !important;left: 50% !important;top: 50%!important;transform: translate(-50%, -50%) !important;}",

 函数

//详情图片放大
  showBigImg(url: string): void {
    console.log(url);
    this.bigimgurl = url;
    $("#imgModal").modal({
      keyboard: true,
      backdrop: "static"
    });
  }
  //详情图片缩小
  hideBigImg(): void {
    this.bigimgurl = "";
    $("#imgModal").modal('hide');
  }