是否可以在 amp-img 中使用内联样式？

【问题标题】：Is it possible to have an in-line styling in the amp-img?是否可以在 amp-img 中使用内联样式？
【发布时间】：2020-07-06 20:22:38
【问题描述】：

我有一个要使用 amp html 呈现的图像，我想使用内联样式。我尝试了以下方法：

<div style=" position: relative;width:240px; height:120px;">
  <amp-img layout="fill"style="object-fit: cover;" alt="" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"> </amp-img>
</div>

但是 amp-img 的内联样式不起作用。有人能说出原因并给出解决方案吗？

【问题讨论】：

您可以用于布局：固定或响应式，最好确保您的组件处于最佳位置。
也有类似响应式的内联布局，但只适用于宽度或高度。

标签： amp-html amp-img

【解决方案1】：

是的，AMP 中允许使用内联样式。对于上面我测试的示例，您为包装的 div 元素应用的样式正在工作。对于您在 amp-img 元素上作为“object-fit:cover”应用的样式，在您使用 layout="fill" 时将不起作用。在填充布局中，img 将采用其包裹元素的大小。

要使用 amp-img，最好使用固定比例的图像（例如 16x9），然后您可以使用布局响应作为 layout="responsive" width="16" height="9"。

【讨论】：

但是当我们创建如下类时：amp-img.cover img { object-fit:cover;对象位置：10px -10px； } 并添加 class="cover"，它可以工作
在这种情况下，您将样式应用于在内呈现的。您的 css 将被应用，但您的 amp-img 容器将在填充布局中相同。要检查我在说什么，请将此最小宽度样式添加到您的上述样式中：amp-img.cover img { object-fit:cover;对象位置：10px -10px；最小宽度：500px； }