在 amp-img 中设计响应式布局
Styling responsive layout in amp-img
自从我实施 Google AMP 以来，我一直在努力解决这个问题。每次我添加 width 远小于我的网站 width 的图片时，amp-img 会自动添加边距以保持纵横比，如下所示：
我尝试过[官方文档]中提到的其他布局，(https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute)，例如flex-item。
以flex-item为例，我可以在桌面版中得到想要的行为，即减少图像的总边距，如下所示：
但在移动版中，当图片比屏幕宽时，图片会左右溢出。
有没有一种方法可以调整 responsive layout 以便在图像相对较小时删除如此大的边距？
在代码中调查了一下，问题似乎是由元素 i-amphtml-sizer 引起的，这是一个元素 google-amp 自动添加的元素，我无法控制它。
I am not posting the url for my blog post in case it is considered spam, but if for some reason you need it, I'll update the question.
更新
它 seems more people 有这个问题。
我解决了！ reading amp documentation on github，在具体的 amp-html-layout 部分，在 "sizes" 中有一个例子说：
In the following example, if the viewport is wider than 320px, the image will be 320px wide, otherwise, it will be 100vw wide (100% of the viewport width).
<amp-img src="https://acme.org/image1.png"
width="400" height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
之前，我的图片是：
<figure>
<amp-img
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
阅读 AMP 文档后：
<figure>
<amp-img
sizes="(min-width: 100px) 100px, 100vw"
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
现在它在所有屏幕尺寸上都能很好地显示：
为了处理各种图像尺寸，我遵循以下规则：
sizes="(min-width: withOfImage) WithOfImage, 100vw"
这样，当屏幕宽度大于图像宽度时，图像将保持其原始宽度，否则图像将为视口宽度的100%。
自从我实施 Google AMP 以来，我一直在努力解决这个问题。每次我添加 width 远小于我的网站 width 的图片时，amp-img 会自动添加边距以保持纵横比，如下所示：
我尝试过[官方文档]中提到的其他布局，(https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute)，例如flex-item。
以flex-item为例，我可以在桌面版中得到想要的行为，即减少图像的总边距，如下所示：
但在移动版中，当图片比屏幕宽时，图片会左右溢出。
有没有一种方法可以调整 responsive layout 以便在图像相对较小时删除如此大的边距？
在代码中调查了一下，问题似乎是由元素 i-amphtml-sizer 引起的，这是一个元素 google-amp 自动添加的元素，我无法控制它。
I am not posting the url for my blog post in case it is considered spam, but if for some reason you need it, I'll update the question.
更新
它 seems more people 有这个问题。
我解决了！ reading amp documentation on github，在具体的 amp-html-layout 部分，在 "sizes" 中有一个例子说：
In the following example, if the viewport is wider than 320px, the image will be 320px wide, otherwise, it will be 100vw wide (100% of the viewport width).
<amp-img src="https://acme.org/image1.png"
width="400" height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
之前，我的图片是：
<figure>
<amp-img
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
阅读 AMP 文档后：
<figure>
<amp-img
sizes="(min-width: 100px) 100px, 100vw"
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive" src="/img/securitynow.jpg"
width="100"
height="100">
</amp-img>
</figure>
现在它在所有屏幕尺寸上都能很好地显示：
为了处理各种图像尺寸，我遵循以下规则：
sizes="(min-width: withOfImage) WithOfImage, 100vw"
这样，当屏幕宽度大于图像宽度时，图像将保持其原始宽度，否则图像将为视口宽度的100%。