具有容器高度的响应<amp-img>

Question

我想在一行文字中插入一个小<amp-img>内联。用例是在一行文本中插入乳胶配方。我事先知道图像的宽度和高度，但我不知道该行文本的高度，因为行高对浏览器大小的变化做出响应（桌面文本较大，手机文本较小） ）。

<amp-img layout=responsive>根据容器的宽度按比例调整图像大小。是否有类似的机制可用于根据容器的高度按比例调整图像大小？

Answer 1

如果检查documenatation of AMP响应式布局，则元素的大小与其容器元素的宽度相同，并自动将其高度调整为宽度和高度属性给出的宽高比。这种布局适用于大多数AMP元素，包括amp-img，amp-video。可用空间取决于父元素，也可以使用max-width CSS自定义。

同时检查控制页面布局外观和行为的@media，就像在任何其他网站上一样。当浏览器窗口更改大小或方向时，将重新评估媒体查询，并根据新结果隐藏和显示元素。

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>

有关使用CSS的更多信息，请查看此SO question。