自适应卡中的Microsoft Bot Framework图像大小 [英] Microsoft Bot Framework image size in adaptive card

问题描述

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

I'm trying to set the height of an image in a bot framework adaptive card. It doesn't have to be exact, but it should be close.

对于以下标记

{
"$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像素高的图像.

shows a 200px high image.

当我运行该应用程序时，浏览器中显示的自适应卡将显示一个86px高的图像.

When I run the app the adaptive card displayed in the browser shows an 86px high image.

我知道自适应卡并不意味着像素完美，但是我应该能够通过指定的属性来控制图像高度.

I know adaptive cards aren't meant to be pixel-perfect, but I should be able to control the image height with the specified properties.

我在做什么错了?

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

Here's a link to the bot running with the web chat client

http://adamsrestaurantbot.azurewebsites.net/

谢谢

亚当

P.S.版本

自适应卡1.1.2 Microsoft.Bot.Builder 4.2.2

Adaptive Cards 1.1.2 Microsoft.Bot.Builder 4.2.2

推荐答案

AdaptiveCard 图像架构表示不能选择高度.

The AdaptiveCard Image Schema shows that height isn't an option.

在设计器中，这是在Preview中，这意味着它尚未得到正式支持:

In the designer, this is in Preview, meaning that it isn't officially supported yet:

宽度/高度不再处于预览状态.但是，仍然需要频道/客户端支持

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

This is because it's really up to the client displaying the card to adjust the size of the image.

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

If you resize the image yourself and specify "size": "auto", it will keep the image's true dimensions, but will still vary the overall size per the client renderer.

很遗憾，您没有做错任何事情.

So unfortunately, you're not doing anything wrong.

您还可以尝试以下两种方法:

Here's a couple of other things you can try:

1. 英雄或缩略图卡，而不是自适应卡.这可能会遇到类似的问题，但是客户可能会以不同的方式提出这些问题.我记得几个月前遇到了这种情况，而且英雄卡的工作情况还算不错.
2. 如果客户端仅使用WebChat，则可以使用自定义样式.自适应卡都使用类ac-image，因此您可以:

1. Hero or Thumbnail cards instead of adaptive cards. This will likely run into similar issues, but clients may render them differently. I recall running into this several months ago and Hero Cards working reasonably well.
2. If the client will only be using WebChat, you can use custom styling. Adaptive Cards all use the class ac-image, so you could:

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

我在您的页面上完成了此操作，并得到了:

I did this on your page and got:

您必须使用CSS来获得所需的样式.

You'll have to play around with the CSS to get it how you want it.

这篇关于自适应卡中的Microsoft Bot Framework图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！