Figma 商品卡片改宽后，为什么图片被裁掉而不是完整缩放？

先判断裁切发生在哪里

在非破坏性的测试副本中复制商品卡片，并保留原卡片作为对照。选用一张包含完整商品、四角边界线和上下左右文字标记的测试图；这些标记只是虚构练习素材，不代表实际商品内容。将卡片改宽后，同时观察画布中的图片和导出的合成图。

重点检查图片到底是某个矩形容器的 Image fill，还是被放在其他图层、遮罩或多重填充关系中。Fill 和 layer properties 会共同影响最终合成效果；因此只看右侧某个颜色或图片缩略值，不能证明当前显示方式。若存在多个 fills 或 blend mode，还要确认它们是否改变了最终外观。

1. 复制目标商品卡片，命名为“商品图适配测试”；不要直接覆盖线上或交付用组件。
2. 把测试图放入与商品卡片相同的图片区域，只改变卡片宽度，记录原始宽度、修改后宽度和图片区域高度；这些记录值按实际文件填写。
3. 依次对同一图片比较 Fill、Fit、Crop 的显示结果，并保留三个状态，避免凭记忆判断。
4. 分别导出或预览三个状态，检查合成结果是否与画布上的图片一致。

三种结果如何解释

Fill 以填满容器为优先，图片比例与容器比例不一致时，边缘内容可能超出容器并被裁掉。Fit 以完整显示图片为优先，通常会留下空白区域；空白是否符合商品卡片设计，需要由你根据版式决定。Crop 用于明确控制裁切范围，改宽后不应假定主体会自动保持完整，必须检查焦点和边界。

如果图片本身完整，但导出后才缺边，继续检查实际拥有图片填充的图层、遮罩、父级裁切关系、其他 fills 以及 blend mode。若画布与导出都缺边，则优先处理图片填充模式或容器裁切边界。

虚构练习：用两张图看出差异

虚构练习：建立宽度为 320、高度为 240 的测试图片区域；尺寸仅为示例。资产 A“蓝壶边界图”包含完整水壶，四边各留出明显边距；资产 B“红盒标签图”包含完整盒子，标签文字位于右侧边界附近。将商品卡片宽度改为 480，高度仍为 240。

若选择 Fill，资产 A 的左右或上下边界可能消失，资产 B 的右侧标签可能被截断；这属于失败，前提是商品详情要求完整展示。若选择 Fit，两张图的完整主体和边界都可见，即使出现空白区域，则通过完整性验收。若设计确实允许裁切，使用 Crop 也可以通过，但必须明确看到并接受被裁掉的边界，且红盒标签不能被误裁成无法识别。这里描述的是判断方法，不是已执行的测试结果。

分支处理与最终条件

先问一个具体问题：商品图是否必须完整展示？若必须完整展示，下一步优先用 Fit 验证；若允许裁切，继续使用 Crop，但要调整裁切位置并检查主体、文字和品牌标记。若希望铺满区域且允许少量缺边，可保留 Fill，但必须在导出图上确认被裁内容可接受。

验收条件应写成可观察结果：在目标改宽后的卡片中，选定图片模式稳定生效；商品主体、必要文字和规定边界在画布及导出合成图中一致；不存在未预期的额外裁切、遮罩或混合效果。完成后只把通过验收的状态应用回正式商品卡片。

资料与建议的范围

下列官方资料支持工具行为和功能边界；本题的测试素材、分支判断和通过条件由 Itemlume 编辑设计，引用不代表对方背书。不要把练习中的尺寸、名称或时间直接当作你的生产规格。