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

【问题标题】：Responsive <amp-img> with a container height具有容器高度的响应式 <amp-img>
【发布时间】：2016-10-20 10:36:28
【问题描述】：

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

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

【问题讨论】：

【解决方案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。

【讨论】：

如果我希望 <amp-img> 将其高度调整为可用宽度，这会有所帮助。在这种情况下，我希望元素将其宽度调整为可用高度。