修改图片缩放变形问题

src/views/AiEmotion.vue

@@ -1856,7 +1856,7 @@ defineExpose({
 /* 为需要放大的图片添加样式 */
 .scaled-img {
   background-image: url('@/assets/img/AiEmotion/tree02.jpg');
-  background-size: 100% 100%;
+  background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   width: 70%;
@@ -1874,6 +1874,7 @@ defineExpose({
 
 .class08 {
   background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* background-size: contain; */
   background-size: 100% 100%;
   background-repeat: no-repeat;
   width: 95%;
@@ -2260,6 +2261,7 @@ defineExpose({
   .scaled-img {
     height: 300px;
     min-height: 25rem;
+    background-size: contain;
   }
 }
 
@@ -2292,9 +2294,10 @@ defineExpose({
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
+    background-size: contain;
     text-align: center;
-    width: 95%;
-    margin-top: 6%;
+    width:100%;
+    margin-top: 4%;
     height: 200px;
     min-height: 200px;
   }