自适应卡中的 Microsoft Bot Framework 图像大小

Question

我正在尝试在机器人框架自适应卡中设置图像的高度。不一定要准确，但应该很接近。

对于以下标记

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"speak": "",
"type": "Container",


          "items": [
                {
                  "type": "TextBlock",
                  "text": "Acai Bowls, Juice Bars & Smoothies, Vegan"
                },
                {
                  "type": "TextBlock",
                  "text": "11:11 Health Bar",
                  "weight": "bolder",
                  "size": "Medium",
                  "spacing": "none"
                },
                {
                  "type": "Image",
                  "url": "https://sarestlocatoreastprem.blob.core.windows.net/images/small_4_half.png?st=2019-05-22T12%3A21%3A32Z&se=2029-05-23T12%3A21%3A00Z&sp=rl&sv=2018-03-28&sr=b&sig=XHqT5Fzdrc9idAYDM9slnMvC7W84d760qM6DC%2BHRZkE%3D",
                  "size": "auto",
                  "width": "82px",
                  "height": "14px"
                },
                {
                  "type": "TextBlock",
                  "text": "(29 reviews)",
                  "isSubtle": true,
                  "spacing": "none"
                },
                {
                  "type": "TextBlock",
                  "text": "",
                  "size": "small",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "87 Union St\r\nNewton, MA 02459",
                  "size": "small",
                  "wrap": true
                },
                {
                  "type": "Image",
                  "url": "https://s3-media3.fl.yelpcdn.com/bphoto/-UK0ZIiw99QtnIqljweeXw/o.jpg",
                  "size": "auto",
                  "height": "200px"
                }
              ]
          }
      ],
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "Directions",
          "url": "https://www.google.com/maps/@42.3297699,-71.1926317,18z?hl=en"
        },
        {
          "type": "Action.OpenUrl",
          "title": "More Info",
          "url": "https://www.yelp.com/biz/11-11-health-bar-newton"
        }
      ]
    }

自适应卡片可视化器

https://adaptivecards.io/visualizer/index.html?hostApp=Bot%20Framework%20WebChat

显示 200 像素高的图像。

当我运行应用程序时，浏览器中显示的自适应卡片会显示 86 像素高的图像。

我知道自适应卡片并不意味着像素完美，但我应该能够使用指定的属性控制图像高度。

我在这里做错了什么？

这是与网络聊天客户端一起运行的机器人的链接

http://adamsrestaurantbot.azurewebsites.net/

谢谢，

亚当

附：版本

自适应卡片 1.1.2 Microsoft.Bot.Builder 4.2.2

Answer 1

AdaptiveCard Image Schema 表明高度不是一个选项。

在设计器中，这是处于预览状态，这意味着它还没有得到官方支持：

编辑：宽度/高度不再处于预览状态。但是，仍然需要渠道/客户来支持它

这是因为真正由显示卡片的客户端来调整图像的大小。

如果您自己调整图像大小并指定"size": "auto"，它将保持图像的真实尺寸，但仍会改变每个客户端渲染器的整体大小。

很遗憾，你没有做错任何事。

您可以尝试以下其他一些方法：

1. 英雄或缩略图卡，而不是自适应卡。这可能会遇到类似的问题，但客户可能会以不同的方式呈现它们。我记得几个月前遇到过这种情况，并且英雄卡运行得相当好。
2. 如果客户端只使用 WebChat，您可以使用自定义样式。自适应卡片都使用 ac-image 类，因此您可以：

img.ac-image {
    height: 100px;
    width: 10px;
}

我在你的页面上做了这个并且得到了：

您必须使用 CSS 来获得您想要的效果。