Figma 自动布局里的商品照片怎样保持比例，又不把卡片撑得过高？

先拆开两个尺寸问题

自动布局会根据子元素的排列、间距、内边距和对齐方式计算父级尺寸；照片或文字内容变化，也可能改变整体布局。因此，照片比例和卡片高度不能用同一个可变尺寸来控制。

在测试副本中建立一个商品卡片，包含一个图片区域、一段商品名称、一个价格文本和一个可选徽章。把图片区域当作独立子元素记录宽度与高度，把卡片外框记录为父级尺寸。你要排查的是：照片是否被拉伸，以及卡片变高究竟是图片区域还是文字内容造成的。

1. 复制一个不会影响线上交付的商品卡片，保留原始照片和当前自动布局结构。
2. 选中图片区域，记录其宽度、高度以及父级的间距、内边距和对齐方式；不要先改照片文件。
3. 准备三个仅改变父级容器宽度的副本，使用“窄”“中”“宽”作为名称。这里的宽度数值只是虚构练习用值，例如 240、300、360；实际项目应记录你的设计规格。
4. 分别查看图片区域、商品名称、徽章和卡片总高度的变化，并保存截图或尺寸记录。

分支判断与下一步

如果三个容器中图片区域的宽高比例一致，但卡片高度随文字换行增加，下一步应检查商品名称的可用宽度、文字行数和父级内边距，不要继续调整照片比例。

如果卡片高度主要随图片区域增加，说明图片区域仍在跟随父级尺寸变化。此时把比例约束放在图片区域层级，并重新比较三个容器；父级只负责承载该区域和其他内容。

如果照片看起来变形，先比较图片区域的宽高变化与原照片比例，而不是比较卡片总高度。若图片区域比例已稳定但视觉仍异常，检查照片内容是否在区域内被裁切；不要把裁切结果误判为图片被拉伸。

虚构练习

虚构练习：明确资产一“陶瓷杯主图”为 1200×1200 的正方形；资产二“折叠伞主图”为 1200×800 的横向照片。分别把它们放入两个结构相同的测试卡片，图片区域作为独立子元素；先不要比较美观程度，只记录图片区域宽、高、商品轮廓和卡片总高。

将两个卡片各复制为窄、中、宽三版，示例宽度仍只是虚构值：240、300、360。通过父级宽度变化进行 A/B 比较：A 是正方形杯图，B 是横向雨伞图。通过标准是，A 的商品轮廓在三版中不变形；B 也不被强行变成正方形，且两者的图片区域比例符合你为该资产定义的展示规则。

通过条件还包括：卡片高度变化可以解释为图片区域、商品名称或徽章中的某一项，而不是无记录地整体膨胀。失败表现是同一资产在窄版被压扁、宽版被拉长，或图片比例正常但卡片高度突然由空白间距增加。

1. 先测量并记录两张原图的宽高比例。
2. 再记录三种父级宽度下的图片区域尺寸和卡片总高。
3. 若失败表现来自图片区域，修改图片区域的比例关系后重测；若来自文字换行，转向文字区域排查。
4. 只在三版结果都符合通过条件后，回写正式商品卡片。

验收记录

最终验收应留下四类证据：两张原图的尺寸比例、三种父级宽度、每版图片区域宽高、卡片总高及其变化原因。检查自动布局中的排列、间距、内边距和对齐是否仍与原设计一致，因为这些子项会共同影响内容变化后的父级尺寸。

接受条件是：商品轮廓在窄、中、宽三版均未出现非等比变形；图片区域的比例变化符合该资产的定义；卡片高度没有因图片区域无界增长；当高度变化来自文字或徽章时，能在记录中指出具体子元素。

1. 打开测试副本并核对尺寸记录。
2. 逐版检查照片轮廓、图片区域比例和卡片总高。
3. 确认父级自动布局的间距、内边距、对齐没有被无意改变。
4. 把通过的图片区域结构复制到正式组件，并再次检查一个真实商品名称。

资料与建议的范围

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