fix(components): center aspectFit images horizontally

[dvd233]

这个 PR 做了什么？ (简要描述所做更改)

修复 H5 Image mode="aspectFit" 只进行垂直居中、窄图在容器内水平贴左的问题。

• 为 .taro-img__mode-aspectfit 增加 left: 50%
• 使用 translate(-50%, -50%) 实现水平和垂直双轴居中
• 新增 E2E 回归测试，以 16×32 图片和 48×48 容器验证图片未占满容器宽度时中心点一致

Fixes #19463

这个 PR 是什么类型？ (至少选择一个)

• 错误修复 (Bugfix) issue: fix [Bug] H5 Image mode="aspectFit" does not center the inner image horizontally #19463
• 新功能 (Feature)
• 代码重构 (Refactor)
• TypeScript 类型定义修改 (Types)
• 文档修改 (Docs)
• 代码风格更新 (Code style update)
• 构建优化 (Chore)
• 其他，请描述 (Other, please describe):

这个 PR 涉及以下平台：

• 所有平台
• Web 端（H5）
• 移动端（React-Native）
• 鸿蒙（Harmony）
• 鸿蒙容器（Harmony Hybrid）
• ASCF 元服务
• 快应用（QuickApp）
• 所有小程序
• 微信小程序
• 企业微信小程序
• 京东小程序
• 百度小程序
• 支付宝小程序
• 支付宝 IOT 小程序
• 钉钉小程序
• QQ 小程序
• 飞书小程序
• 快手小程序
• 头条小程序

验证：

• pnpm -r --aggregate-output --filter '@tarojs/taro-h5...' --if-present prod
• pnpm exec eslint packages/taro-components/__tests__/image.e2e.ts
• pnpm exec stencil test --spec --ci -i --coverage --silent --no-build（70 suites、106 tests、35 snapshots）
• pnpm exec stencil test --e2e --ci --no-build image.e2e.ts -i

回归用例在修复前失败（容器水平中心为 32px，图片水平中心为 16px），应用修复后通过。

Summary by CodeRabbit

• Bug 修复

  • 修复图片使用 aspectFit 模式时的水平居中问题。
  • 图片现在可在容器内同时保持水平和垂直居中，并正确适应容器尺寸。

• 测试

  • 新增端到端测试，验证不同宽高比例图片在 aspectFit 模式下的居中表现。

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3df1b28a-ae5e-42ea-a136-56cd1272b4ef

📥 Commits

Reviewing files that changed from the base of the PR and between d6d69e3 and 2721205.

📒 Files selected for processing (2)

• packages/taro-components/__tests__/image.e2e.ts
• packages/taro-components/src/components/image/style/index.scss

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

aspectFit 模式新增水平居中定位。端到端测试验证内部图片在容器内保持水平和垂直居中。

Changes

aspectFit 居中行为

Layer / File(s)	Summary
居中样式与端到端验证 packages/taro-components/src/components/image/style/index.scss, packages/taro-components/__tests__/image.e2e.ts	aspectFit 内部图片新增 left: 50%，并使用 translate(-50%, -50%) 实现双轴居中。端到端测试加载 16x32 的内联 SVG，并验证图片尺寸及中心位置。

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 27212

This H5-only change horizontally centers narrow aspectFit images while preserving the existing image mode contract and adds regression coverage; no actionable merge-blocking risk remains.

Poem

小兔看见图片站中央，
aspectFit 轻轻调整方向。
左移半身，双轴对齐，
测试守住边界与光。
胡萝卜也在中心绽放。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题“fix(components): center aspectFit images horizontally”准确概括了本次 PR 的主要变更，即修复 aspectFit 图片的水平居中问题。
Linked Issues check	✅ Passed	PR 已实现 issue #19463 的核心要求：为 H5 的 aspectFit 图片增加 left: 50%，并使用 translate(-50%, -50%) 实现水平和垂直居中。新增 E2E 测试验证图片中心与容器中心对齐。
Out of Scope Changes check	✅ Passed	代码变更仅涉及 aspectFit 样式修复和对应的 H5 E2E 回归测试，均与 issue #19463 直接相关。未发现无关或超出范围的代码变更。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}