<!-- Generated by SpecStory -->

# 保持原始图片比例绘制 (2025-06-19 16:18:54)

_**User**_

这里右边的 图片的需要保持原始图片的比例绘制

---

_**Assistant**_

我来修改代码以保持原始图片的比例绘制。需要根据图片的宽高比来动态调整显示尺寸。

---



---

现在需要应用这些计算出的尺寸和偏移量到实际的图片显示部分：

---



---

由于我们使用了 flexbox 的 `alignItems: 'center'` 和 `justifyContent: 'center'` 来居中显示图片，所以 `offsetX` 和 `offsetY` 变量实际上没有被使用。让我删除这些未使用的变量：

---



---

完成！现在代码已经修改为保持原始图片的比例绘制。主要改动包括：

1. **添加了图片比例计算逻辑**：
   - 获取原始图片的宽高比 `aspectRatio = imageWidth / imageHeight`
   - 根据容器的最大尺寸（360x300px）计算合适的显示尺寸
   - 如果图片较宽，以宽度为准；如果图片较高，以高度为准

2. **修改了图片显示结构**：
   - 在胶片中间区域使用 flexbox 居中对齐
   - 创建一个内层容器，使用计算出的 `displayWidth` 和 `displayHeight`
   - 图片按照计算出的尺寸显示，保持原始比例

3. **移除了未使用的变量**：
   - 删除了 `offsetX` 和 `offsetY` 变量，因为使用 flexbox 居中更简洁

现在右边的图片会根据原始图片的宽高比自动调整显示尺寸，确保图片不会被拉伸变形，同时在胶片框架内居中显示。

---

_**User**_

外面的胶片框也要和图片保持一样的比例

---

_**Assistant**_

我来修改代码，让外面的胶片框也保持和图片一样的比例。

---



---

现在需要更新胶片框的尺寸和图片区域的尺寸：

---



---



---

