style(record): 优化母排测温信息的图片显示样式

- 移除了固定的宽度和高度样式，使图片能够自适应容器大小
- 添加了响应式的图像样式，确保在不同屏幕尺寸下都能良好显示
- 通过 object-fit 属性优化了图片的显示效果，保持了宽高比

ruoyi-ui/src/views/record/recordBusbarTemp/index.vue

@@ -351,12 +351,15 @@
 
 <!-- 图片显示对话框 -->
 <el-dialog :title="photoTitle" :visible.sync="photoOpen" width="500px" append-to-body>
-  <div class="image-container" >
-    <img :src="visiblePhoto" alt="显示图片" style="width: 459px; height: 239px;"/>
+<template>
+  <div class="image-container">
+    <img :src="visiblePhoto" alt="显示图片" />
   </div>
-  <div class="image-container" >
-    <img :src="thermalPhoto" alt="显示图片" style="width: 459px; height: 239px;"/>
+  <div class="image-container">
+    <img :src="thermalPhoto" alt="显示图片" />
   </div>
+</template>
+
 </el-dialog>
 
 
@@ -602,3 +605,22 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+
+
+/* 定义一个图像容器类，用于设置图像的布局和样式 */
+.image-container {
+  width: 100%; /* 设置容器宽度为100%，以适应父元素 */
+  max-width: 1080px; /* 设置容器的最大宽度，防止图像在大屏幕上显示过大 */
+  margin: 0 auto; /* 居中显示容器 */
+  position: relative; /* 设置相对定位，以便于在容器内进行绝对定位 */
+}
+
+/* 设置图像容器内的图像样式 */
+.image-container img {
+  width: 100%; /* 设置图像宽度为100%，充满容器 */
+  height: 100%; /* 设置图像高度为100%，充满容器 */
+  object-fit: cover; /* 或者使用 contain，这里选择 cover 以保持图像的宽高比并覆盖整个容器 */
+}
+</style>