From 93742e8de4b5f61b3a034fa18b5d47f48082f6b9 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Wed, 13 Nov 2024 10:58:35 +0800
Subject: [PATCH] =?UTF-8?q?style(record):=20=E4=BC=98=E5=8C=96=E6=AF=8D?=
 =?UTF-8?q?=E6=8E=92=E6=B5=8B=E6=B8=A9=E4=BF=A1=E6=81=AF=E7=9A=84=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了固定的宽度和高度样式，使图片能够自适应容器大小
- 添加了响应式的图像样式，确保在不同屏幕尺寸下都能良好显示
- 通过 object-fit 属性优化了图片的显示效果，保持了宽高比
---
 .../views/record/recordBusbarTemp/index.vue   | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue b/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
index 76d5ca4..eaa1b93 100644
--- a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
+++ b/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>