如何设置amp-img的宽度和高度

Question

amp-img的宽高可以设置样式吗？

一个网页有很多 amp-img 标签，所有标签的宽度、高度和布局都完全相同。最好为它们设置样式，这样就不必为每个 amp-img 指定它们。

尝试了以下方法：

 <style amp-custom>
    amp-img {
    vertical-align:top;
    width:30px;
    height:30px;
    }

    .bold{
    font-weight:bold
    }
 </style amp-custom>

   Tap
    <amp-img alt="Add" layout="fill" src="@Url.Content("~/Content/appbar.add.rest.png")"></amp-img>
    and choose one of the following actions:

它通过了 AMP 验证，但图像未显示。如果 layout="fill" 被移除，图片会显示，但 AMP 验证失败。

Answer 1

不填写任何内容（宽度、高度或布局）会强制 AMP 假定布局类型为 container，而 amp-img 的布局类型不受支持。因此，您至少要指定一个布局。如果你只想指定一个布局，然后使用 CSS 指定宽度和高度，你可以使用fill。

然后您可以使用 CSS 引用 amp-img 并指定宽度和高度。

amp-img { width: 300px; height: 200px }

有关支持的布局的更多信息，请参阅amp-img reference page。

支持的布局：fill、fixed、fixed-height、flex-item、intrinsic、nodisplay、responsive

要详细了解每种布局类型的含义，请查看layout and media queries 文档。