MS Teams应用Adaptive Cards图片尺寸设置及显示失真问题咨询

固定尺寸参考标准 #

• 自适应卡片在Teams客户端的最大可用宽度为740px，单张全宽图片建议宽高比控制在16:9（宽740px/高416px）到4:3（宽740px/高555px）区间内，超出区间的图片会被强制拉伸或裁剪
• 若图片嵌入在ColumnSet分栏容器内部，需按分栏占比计算实际尺寸：两栏布局单栏最大宽度为360px，三栏布局单栏最大宽度为240px，对应高度按照你需要的宽高比等比缩放即可

配置修正规则 #

图片变形多数为属性配置缺失导致，需在JSON中显式指定以下参数，禁止留空让客户端自动计算：

{
  "type": "Image",
  "url": "图片资源链接",
  "width": "600px", // 按你实际需要的宽度填写，不超过父容器最大宽度
  "height": "400px", // 按宽高比等比计算填写
  "size": "Stretch",
  "horizontalAlignment": "Center",
  "style": "Default"
}

• 若需要固定比例不拉伸，可将size属性改为Uniform，此时图片会等比缩放适配容器，不会变形

排查步骤 #

• 切换自适应卡片设计器的预览环境为Microsoft Teams，不要使用通用Adaptive Cards预览模式，设计器默认预览的适配规则和Teams客户端不一致
• 检查图片本身是否为标准web适配的RGB格式，CMYK印刷格式图片会出现渲染异常
• 避免给父容器设置超出范围的padding、margin参数挤压图片显示区域

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