使用容器高度响应<amp-img>

Question

我想在一行文本上放一个小的<amp-img>。用例是在一行文本上插入一个latex公式。我事先知道图像的宽度和高度，但我不知道文本行的高度，因为行高会随着浏览器大小的变化而变化(桌面文本较大，手机文本较小)。

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

Answer 1

如果您检查关于响应式布局的documenatation of AMP，元素的大小将调整为其容器元素的宽度，并自动将其高度调整为宽度和高度属性所给出的纵横比。这种布局非常适合大多数AMP元素，包括amp-img、amp-video。可用空间取决于父元素，也可以使用最大宽度CSS进行自定义。

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

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

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