整卷查看时保持各图片的相对比例

src/features/student/inspect/MarkBody.vue

@@ -14,6 +14,9 @@
           v-for="(item, index) in sliceImagesWithTrackList"
           :key="index"
           class="single-image-container"
+          :style="{
+            width: item.width,
+          }"
         >
           <img :src="item.url" draggable="false" />
           <MarkDrawTrack
@@ -44,6 +47,7 @@ interface SliceImage {
   tagList: Array<SpecialTag>;
   originalImageWidth: number;
   originalImageHeight: number;
+  width: string; // 图片在整个图片列表里面的宽度比例
 }
 
 const { usingImage = "sliceUrls" } = withDefaults(
@@ -62,6 +66,7 @@ const { addTimeout } = useTimers();
 
 let rendering = ref(false);
 let sliceImagesWithTrackList: Array<SliceImage> = reactive([]);
+let maxImageWidth = 0;
 
 async function processImage() {
   if (!store.currentTask) return;
@@ -73,6 +78,8 @@ async function processImage() {
     images.push(image);
   }
 
+  maxImageWidth = Math.max(...images.map((i) => i.naturalWidth));
+
   for (const url of urls) {
     const indexInSliceUrls = urls.indexOf(url) + 1;
     const image = images[indexInSliceUrls - 1];
@@ -96,6 +103,7 @@ async function processImage() {
       tagList: thisImageTagList,
       originalImageWidth: image.naturalWidth,
       originalImageHeight: image.naturalHeight,
+      width: (image.naturalWidth / maxImageWidth) * 100 + "%",
     });
   }
 }