修复detail查看整体图大小对不上

src/component/Detail/model/modelPosition.vue

@@ -25,13 +25,15 @@
 	<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
 		<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
 			<div class="detail_modal_item_front">
-				<img :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
+				<img
+				:style="{width:observerWH.width+'px',height:observerWH.height+'px'}"
+				 :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
 			</div>
 		</div>
 	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
@@ -60,6 +62,11 @@ export default defineComponent({
 			isEditPattern:inject('isEditPattern') as any,
 			singleOveral:inject('singleOveral') as any,
 			detailBody:null as any,
+			observer:null as any,
+			observerWH:{
+				width:0,
+				height:0,
+			},
 		})
 		const selectItem = reactive({
 		    selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
@@ -82,6 +89,21 @@ export default defineComponent({
 				let dom = document.querySelector('.molepositon .perview_img') as any
 				if(!detailData.frontBack?.body?.path || !dom)return
 				img.onload = () => {
+					//监听模特图片宽度设置整体图片宽度
+					if (detailData.observer) {
+						detailData.observer.disconnect()
+					}
+					detailData.observerWH.width = dom.width
+					detailData.observerWH.height = dom.height
+					detailData.observer = new ResizeObserver((entries) => {
+						if(entries[0].contentRect.width == 0)return
+						detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
+						detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
+						console.log(detailData.observerWH)
+					})
+					detailData.observer.observe(dom)
+
+
 					if(detailData.designDetail.clothes.length == 0){
 						store.commit('DesignDetail/addDesignColthes')
 						emit('addSketch')
@@ -401,6 +423,11 @@ export default defineComponent({
 				};
 				img.src = url;
 		}
+		onUnmounted(()=>{
+			if (detailData.observer) {
+				detailData.observer.disconnect()
+			}
+		})
         return{
 			...toRefs(detailData),
 			...toRefs(selectItem),
@@ -416,6 +443,7 @@ export default defineComponent({
 			updataPosition,
         }
     },
+	
 	directives:{
 		detailBody:{
 			mounted (el,data:any) {