� 问题修复:
- 解决拖拽分割线时图片会缩放变形的问题
- 确保图片始终保持原始比例,不会因容器宽度变化而变形
- 只改变图片的显示区域,而非图片本身的尺寸
� 技术实现:
- 使用CSS背景图片替代Image组件
- 通过backgroundSize动态计算保持图片原始比例
- 左侧:backgroundPosition: 'left center' 显示图片左侧部分
- 右侧:backgroundPosition: 'right center' 显示图片右侧部分
- 动态调整backgroundSize确保图片不变形
� 实现原理:
- 左半部分:backgroundSize = (100 / splitPosition) * 100%
- 右半部分:backgroundSize = (100 / (100 - splitPosition)) * 100%
- 通过数学计算确保图片在任何分割比例下都保持原始尺寸
✅ 效果验证:
- 拖拽时图片不再缩放变形
- 保持图片原始宽高比
- 只显示对应区域的图片内容
- 提供更真实的before/after对比效果
|
||
|---|---|---|
| .. | ||
| DownloadSection | ||
| ErrorOverlay | ||
| LoadingOverlay | ||
| TemplateCard | ||
| UploadButton | ||