响应<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更多信息。