Botframework 自适应卡中的Microsoft Bot框架图像大小

Botframework 自适应卡中的Microsoft Bot框架图像大小,botframework,adaptive-cards,Botframework,Adaptive Cards,我正在尝试在机器人框架自适应卡中设置图像的高度。不一定要精确,但应该很接近 对于以下标记 { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "speak": "", "type": "Container", "items": [ {

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

对于以下标记


{
"$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"
        }
      ]
    }

自适应卡片可视化仪

显示200像素高的图像

当我运行应用程序时,浏览器中显示的自适应卡显示86px高的图像

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

我做错了什么

这里有一个链接,指向与web聊天客户端一起运行的bot

谢谢

亚当

附则版本

自适应卡1.1.2 Microsoft.Bot.Builder 4.2.2

自适应卡片显示高度不是选项

在designer中,它处于预览状态,这意味着它尚未得到官方支持:

编辑:宽度/高度不再在预览中。但是,支持它仍取决于渠道/客户端

这是因为显示卡的客户机需要调整图像的大小

如果您自己调整图像大小并指定
“大小”:“auto”
,它将保留图像的真实尺寸,但仍会根据客户端渲染器改变总体大小

所以很不幸,你没有做错什么

以下是一些您可以尝试的其他东西:

  • 英雄卡或缩略图卡,而不是自适应卡。这可能会遇到类似的问题,但客户端可能会以不同的方式呈现这些问题。我记得几个月前遇到过这种情况,英雄卡相当不错
  • 如果客户端仅使用WebChat,则可以使用自定义样式。自适应卡都使用class
    ac image
    ,因此您可以:
  • img.ac-image{
    高度:100px;
    宽度:10px;
    }
    
    我在你的页面上这样做,得到:

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

    自适应卡片显示高度不是一个选项

    在designer中,它处于预览状态,这意味着它尚未得到官方支持:

    编辑:宽度/高度不再在预览中。但是,支持它仍取决于渠道/客户端

    这是因为显示卡的客户机需要调整图像的大小

    如果您自己调整图像大小并指定
    “大小”:“auto”
    ,它将保留图像的真实尺寸,但仍会根据客户端渲染器改变总体大小

    所以很不幸,你没有做错什么

    以下是一些您可以尝试的其他东西:

  • 英雄卡或缩略图卡,而不是自适应卡。这可能会遇到类似的问题,但客户端可能会以不同的方式呈现这些问题。我记得几个月前遇到过这种情况,英雄卡相当不错
  • 如果客户端仅使用WebChat,则可以使用自定义样式。自适应卡都使用class
    ac image
    ,因此您可以:
  • img.ac-image{
    高度:100px;
    宽度:10px;
    }
    
    我在你的页面上这样做,得到:


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

    我将研究HeroCards。我无法获得您在工作回答中提供的CSS规则。我将其添加到页面的元素中,但是Bot框架在元素本身上为img元素设置CSS,因此样式规则被忽略。例如,如果我将图像元素的大小值设置为“拉伸”,则BF将宽度设置为10)%。如果我将“大小”设置为“自动”,它将设置“最大宽度”。我听说大小不在架构中,但在设计器的元素属性中。在设计器中更改大小值会更改该页面上图像的大小。如果它不受支持,他们应该从设计器中删除它。使用!重要的是,将id添加到父iframe并为此编写规则没有帮助。附加到img元素的style属性将覆盖这些规则。也许男朋友应该用另一种方式来设计这个元素。1)对不起。我使用了错误的CSS选择器(出于某种原因,它在Chrome元素检查器中工作)。更新答案。2) 更新答案。设计师说它在预览中。即使退出预览,也将由客户机来实现。我猜网络聊天将是最早使用的方式之一。最初的CSS选择器适用于您使用的iFrame。如果你从iFrame切换到,你可以在我的答案中使用CSS。我将研究HeroCards。我无法获得您在工作回答中提供的CSS规则。我将其添加到页面的元素中,但是Bot框架在元素本身上为img元素设置CSS,因此样式规则被忽略。例如,如果我将图像元素的大小值设置为“拉伸”,则BF将宽度设置为10)%。如果我将“大小”设置为“自动”,它将设置“最大宽度”。我听说大小不在架构中,但在设计器的元素属性中。在设计器中更改大小值会更改该页面上图像的大小。如果它不受支持,他们应该从设计器中删除它。使用!重要的是,将id添加到父iframe并为此编写规则没有帮助。附加到img元素的style属性将覆盖这些规则。也许男朋友应该用另一种方式来设计这个元素。1)对不起。我使用了错误的CSS选择器(出于某种原因,它在Chrome元素检查器中工作)。更新答案。2) 更新答案。设计师说它在预览中。即使退出预览,也将由客户机来实现。我猜网络聊天将是最早使用的方式之一。最初的CSS选择器适用于您使用的iFrame。如果从iFrame切换到,可以在我的答案中使用CSS。