From f4588a563ed9a1f0233d53260416127811d028e4 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 17:49:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=97=B6=E5=9B=BE=E7=89=87=E7=BC=A9=E6=94=BE=E5=8F=98=E5=BD=A2?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BF=9D=E8=AF=81=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E4=B8=8D=E5=8F=98=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

� 问题修复：
- 解决拖拽分割线时图片会缩放变形的问题
- 确保图片始终保持原始比例，不会因容器宽度变化而变形
- 只改变图片的显示区域，而非图片本身的尺寸

� 技术实现：
- 使用CSS背景图片替代Image组件
- 通过backgroundSize动态计算保持图片原始比例
- 左侧：backgroundPosition: 'left center' 显示图片左侧部分
- 右侧：backgroundPosition: 'right center' 显示图片右侧部分
- 动态调整backgroundSize确保图片不变形

� 实现原理：
- 左半部分：backgroundSize = (100 / splitPosition) * 100%
- 右半部分：backgroundSize = (100 / (100 - splitPosition)) * 100%
- 通过数学计算确保图片在任何分割比例下都保持原始尺寸

✅ 效果验证：
- 拖拽时图片不再缩放变形
- 保持图片原始宽高比
- 只显示对应区域的图片内容
- 提供更真实的before/after对比效果
---
 src/components/TemplateCard/index.css | 24 +--------------------
 src/components/TemplateCard/index.tsx | 30 +++++++++++++--------------
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index 30b5ed9..40ba7a0 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -40,29 +40,7 @@
   position: relative;
   overflow: hidden;
   transition: width 0.1s ease-out;
-}
-
-.comparison-image {
-  width: 200%; /* 图片宽度设为容器的2倍 */
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  background: #f5f5f5;
-  transition: opacity 0.3s ease;
-}
-
-/* 左半部分显示原图的左半部分 */
-.left-image {
-  transform: translateX(0); /* 不偏移，显示图片左半部分 */
-}
-
-/* 右半部分显示效果图的右半部分 */
-.right-image {
-  transform: translateX(-50%); /* 向左偏移50%，显示图片右半部分 */
-}
-
-.comparison-image:not([src]) {
-  opacity: 0.5;
+  background-color: #f5f5f5;
 }
 
 /* 标签容器 */
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 2f9b608..81a61d9 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -1,4 +1,4 @@
-import { View, Text, Image } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useState, useRef } from 'react'
 import Taro from '@tarojs/taro'
 import { Template } from '../../store/types'
@@ -76,27 +76,27 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           {/* 左半部分 - 原图的左半部分 */}
           <View
             className='image-half left-half'
-            style={{ width: `${splitPosition}%` }}
+            style={{
+              width: `${splitPosition}%`,
+              backgroundImage: `url(${template.input})`,
+              backgroundSize: `${(100 / splitPosition) * 100}% 100%`,
+              backgroundPosition: 'left center',
+              backgroundRepeat: 'no-repeat'
+            }}
           >
-            <Image
-              className='comparison-image left-image'
-              src={template.input}
-              mode='aspectFill'
-              lazyLoad
-            />
           </View>
 
           {/* 右半部分 - 效果图的右半部分 */}
           <View
             className='image-half right-half'
-            style={{ width: `${100 - splitPosition}%` }}
+            style={{
+              width: `${100 - splitPosition}%`,
+              backgroundImage: `url(${template.output})`,
+              backgroundSize: `${(100 / (100 - splitPosition)) * 100}% 100%`,
+              backgroundPosition: 'right center',
+              backgroundRepeat: 'no-repeat'
+            }}
           >
-            <Image
-              className='comparison-image right-image'
-              src={template.output}
-              mode='aspectFill'
-              lazyLoad
-            />
           </View>
 
           {/* 可拖拽的分割线 */}