fix 图片占满空间的bug

src/features/Image/Image.vue

@@ -132,34 +132,36 @@
     wrapClassName="full-modal"
     @ok="visible = false"
   >
-    <div style="position: relative">
-      <img
-        id="preview-image"
-        :src="cardUrl"
-        draggable="false"
-        style="
-          max-width: 100%;
-          max-height: calc(100vh - 180px);
-          user-select: none;
-        "
-      />
-      <div
-        ref="dragContainerRef"
-        style="
-          color: red;
-          border: 2px dotted red;
-          cursor: grab;
-          width: 80px;
-          height: 80px;
-          top: 0;
-          left: 0;
-          user-select: none;
-        "
-        :style="{ top: yAttr, left: xAttr }"
-        @mousedown="mouseDownHandler"
-        class="water-mark"
-      >
-        <div>成绩明细</div>
+    <div style="display: flex; justify-content: center">
+      <div style="position: relative; overflow: hidden">
+        <img
+          id="preview-image"
+          :src="cardUrl"
+          draggable="false"
+          style="
+            max-width: 100%;
+            max-height: calc(100vh - 180px);
+            user-select: none;
+          "
+        />
+        <div
+          ref="dragContainerRef"
+          style="
+            color: red;
+            border: 2px dotted red;
+            cursor: grab;
+            width: 80px;
+            height: 80px;
+            top: 0;
+            left: 0;
+            user-select: none;
+          "
+          :style="{ top: yAttr, left: xAttr }"
+          @mousedown="mouseDownHandler"
+          class="water-mark"
+        >
+          <div>成绩明细</div>
+        </div>
       </div>
     </div>
     <template #footer>