如何判断缩放叠加矩形时用高/宽还是宽/高计算？

要让500×500的正方形在不同比例背景上视觉大小一致，核心是保证正方形与背景的相对视觉比例固定。以下是清晰可执行的规则：

1. 核心标准定义 #

默认“视觉大小一致”指：当所有背景被**等比例缩放至同一尺寸（比如统一宽度为1000像素）**时，正方形的尺寸完全相同。

2. 通用计算步骤 #

假设原始正方形边长为S=500，基准画布（即原始500×500正方形所在的画布）尺寸为基准宽W0、基准高H0（若基准是500×500正方形，则W0=H0=500）：

• 确定缩放基准：若以宽度为基准，缩放比例k = 目标背景宽W / W0；若以高度为基准，缩放比例k = 目标背景高H / H0
• 目标正方形边长 = S × k

3. 针对横竖屏的简化规则 #

情况A：以背景短边为基准（适配所有横竖屏，避免正方形超出背景） #

• 找到背景的短边：短边 = min(背景宽W, 背景高H)
• 目标正方形边长 = 短边（等价于500 × (短边 / 500)）
• 例：736宽/272高的横屏背景，短边为272，目标边长=272

情况B：以背景长边为基准（保证正方形占满长边比例） #

• 找到背景的长边：长边 = max(背景宽W, 背景高H)
• 目标正方形边长 = 长边（等价于500 × (长边 / 500)）
• 例：2448宽/3264高的竖屏背景，长边为3264，目标边长=3264

情况C：保持正方形与背景的比例对应（匹配你的实际需求） #

如果你希望正方形的边长与背景宽/高的比例，和原始正方形与基准画布的比例一致：

• 要对齐宽度比例：目标边长 = 500 × (目标背景宽 / 基准画布宽)
• 要对齐高度比例：目标边长 = 500 × (目标背景高 / 基准画布高)

结合你给出的例子：

• 右侧背景（2448W/3264H）：你使用500*(3264/2448)，本质是希望正方形的高度占比，与原始正方形在基准画布的宽度占比一致
• 1080W/1920H背景：你使用500*(1080/1920)，本质是希望正方形的宽度占比，与原始正方形在基准画布的高度占比一致

4. 快速判断公式的方法 #

• 若要让正方形的宽度占背景宽度的比例和原始正方形的基准比例一致，公式用背景宽度参与计算
• 若要让正方形的高度占背景高度的比例和原始正方形的基准比例一致，公式用背景高度参与计算

内容的提问来源于stack exchange，提问作者Mohammed Hamdan