Question

我目前正在制作我的网站AMP - ified我的网站是在引导程序中构建的，所有内容都是响应式的，因此我设置的大多数图像都是这样的：

img{
  width:100%;
  height:auto;
}

然而，我遇到amp-img时遇到的问题是，它需要在图片上设置width和height。如果没有设置amp和height，那么使用width生成响应式图片的正确方法是什么？

Answer 1

amp 要求尺寸出现在标签中

您放置的尺寸是amp-script用于生成占位符的尺寸。占位符会在图片加载时阻止内容在周围跳。

话虽如此，只是将有机图片尺寸放在标签中，在CSS中使用以下两个属性，以确保图片效果不错< / p>

（确保添加选项 - 当然）

＆＃13;

{
  max-width: 100%;
  height: auto;
}

＆＃13;

Answer 2

实现这一目标的AMP方法是使用layout属性。在amp-img中，您可以指定来源，原生高度和重量;带有格式的sourceset，以“css像素”（例如96px / in）为您的响应式图像layout= responsive而已完成。 AMP将保持h / w比率。

实施例

<amp-img
    src="/img/small.jpg"
    srcset="/img/medium.jpg 640w,
           /img/small.jpg 320w"
    width="1800"
    height="2777"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>

在此示例中，AMP引擎会推断layout="responsive"，因为指定了图像大小和格式。如果未定义高度和宽度，则默认布局为“容器”（例如，如普通div）。

您还可以在amp-img中添加放大器媒体查询。上面的例子可以像这样设置：

<amp-img
    media="(max-width: 639px)"
    src="/img/small.jpg"
    width="450"
    height="694"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>
<amp-img
    media="(min-width: 639px)"
    src="/img/medium.jpg"
    width="900"
    height="1388"
    layout="responsive"
    alt="Don't forget to add one">
</amp-img>

在这种情况下，“media”属性将优先于自适应选择（但除非您想在某个屏幕尺寸上强制某个图像，否则它几乎没有实际差异。）

要获得良好的概述：https://www.ampbyexample.com/advanced/layout_system/

希望这个帮助

Answer 3

在不知道图像的宽度或高度的情况下，显示图像的唯一方法是给它l ayout attribute fill并将其包装在一个带有add的元素中，该元素包含以下css property object-fit

.ampImg__Wrapper {
  object-fit: contain;
}

如何正确设置amp-img的宽度和高度属性

3 个答案: