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]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 6f57c4e2-a853-4838-80d3-f4a4c8f4a3c2

📥 Commits

Reviewing files that changed from the base of the PR and between 9983f09 and c88a2e9.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 119523ab-b131-4640-9fc0-0d6fe40cfb47

📥 Commits

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

📒 Files selected for processing (1)

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

Included review availability: Your plan provides up to 10 included reviews per hour; 8 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，并验证图片尺寸及中心位置。

Priority: ➖ Normal

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

Change: Bug fix · Severity of issue fixed: Medium

🚥 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	标题准确概括了主要变更：修复 aspectFit 图片的水平居中问题。标题简洁、明确，并与样式修改和端到端测试一致。
Linked Issues check	✅ Passed	PR 与直接关联的 issue #19463 的编码目标一致。packages/taro-components/src/components/image/style/index.scss 中，.taro-img__mode-aspectfit 使用 left: 50% 和 transform: translate(-50%, -50%)，因此支持水平和垂直居中。`packages/…
Out of Scope Changes check	✅ Passed	已提供的 PR 摘要和当前文件内容显示，变更集中在 H5 图片 aspectFit 样式和对应 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…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

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

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.55%. Comparing base (473d04d) to head (c88a2e9).

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #19491    +/-   ##
========================================
  Coverage   54.55%   54.55%            
========================================
  Files         463      463            
  Lines       25349    25349            
  Branches     6323     6324     +1     
========================================
+ Hits        13829    13830     +1     
- Misses       9509     9636   +127     
+ Partials     2011     1883   -128     

Flag	Coverage Δ
taro-cli	56.96% <ø> (+0.10%)	⬆️
taro-runtime	57.88% <ø> (ø)
taro-web	52.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.
see 48 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.