style(exam): adjust display size of position detail schematic in exam page, keep aspect ratio and fit vertically without expanding parent container

src/pages/exam/components/BodyPositionDetail.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { Row, Col, Typography, Image } from 'antd';
+import { Row, Col, Typography, Image, Flex } from 'antd';
 import { getViewIconUrl } from '@/API/bodyPosition';
 import CollimatorIcon from '../../../assets/imgs/Collimator_normal.png';
 import SidIcon from '../../../assets/imgs/SID.png';
@@ -12,39 +12,57 @@ const BodyPositionDetail: React.FC = () => {
   const bodyPositionDetail = useSelector(
     (state: RootState) => state.bodyPositionDetail
   );
+  const wrapRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Row gutter={[16, 16]}>
+    <Flex vertical className="h-full">
       {/* 第一行 : 患者姓名*/}
-      <Col span={24} className="text-center">
+      <div className="text-center">
         <Title level={4}>{bodyPositionDetail.patient_name}</Title>
-      </Col>
+      </div>
       {/* 第二行 ：患者id，登记号，study描述*/}
-      <Col span={8}>
-        <Text>Patient ID: {bodyPositionDetail.patient_id}</Text>
-      </Col>
-      <Col span={8}>
-        <Text>Accession Number: {bodyPositionDetail.registration_number}</Text>
-      </Col>
-      <Col span={8}>
-        <Text>Study Description: {bodyPositionDetail.study_description}</Text>
-      </Col>
+      <Row>
+        <Col span={8}>
+          <Text>Patient ID: {bodyPositionDetail.patient_id}</Text>
+        </Col>
+        <Col span={8}>
+          <Text>
+            Accession Number: {bodyPositionDetail.registration_number}
+          </Text>
+        </Col>
+        <Col span={8}>
+          <Text>Study Description: {bodyPositionDetail.study_description}</Text>
+        </Col>
+      </Row>
+
       {/* 第三行 ：体位示意图*/}
-      <Col span={24}>
-        <div className="flex justify-center">
-          <Image
-            src={getViewIconUrl(bodyPositionDetail.body_position_image)}
-            alt="Body Position"
-            className="w-full h-auto"
-          />
-        </div>
-      </Col>
+      <Flex
+        //flex={1}                       // 吃掉剩余宽高
+        style={{ minHeight: 0 }} // 保险丝
+        className="flex-grow"
+        ref={wrapRef}
+      >
+        <div
+          style={{
+            // border: '1px solid red',
+            // width: '500px',
+            // height: '300px',
+            width: '100%', // 随父容器宽
+            //aspectRatio: '16 / 9',        // 根据图片真实比例改，如 4/3、1/1 等
+            backgroundImage: `url(${getViewIconUrl(bodyPositionDetail.body_position_image)})`,
+            backgroundSize: 'contain', // cover 亦可
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+          }}
+        ></div>
+      </Flex>
+
       {/* 第四行 ：体位描述*/}
-      <Col span={24} className="text-center">
+      <div className="text-center">
         <Text>View Description: {bodyPositionDetail.view_description}</Text>
-      </Col>
+      </div>
       {/* 第五行 ：设备信息*/}
-      <Col span={24} className="flex flex-row items-center justify-center">
+      <div className="flex flex-row items-center justify-center">
         <div className="text-center">
           <Image src={CollimatorIcon} alt="Logo" height={'100%'} />
         </div>
@@ -54,15 +72,14 @@ const BodyPositionDetail: React.FC = () => {
         <div className="text-center ml-2">
           <Text>Width: {bodyPositionDetail.collimator_width}</Text>
         </div>
-      </Col>
+      </div>
       {/* 第六行 */}
-      <Col span={24} className="flex justify-center">
-        <div className="flex items-center">
-          <Image src={SidIcon} alt="Logo" className="mr-2" height={'100%'} />
-          <Text>SID: {bodyPositionDetail.sid}</Text>
-        </div>
-      </Col>
-    </Row>
+
+      <div className="flex items-center">
+        <Image src={SidIcon} alt="Logo" className="mr-2" height={'100%'} />
+        <Text>SID: {bodyPositionDetail.sid}</Text>
+      </div>
+    </Flex>
   );
 };