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>
 
           {/* 可拖拽的分割线 */}