有没有办法在 amp-img 标签中保持原始图像的纵横比？答案

【问题标题】：Is there a way to keep the original image aspect ration in amp-img tag?有没有办法在 amp-img 标签中保持原始图像的纵横比？
【发布时间】：2016-08-23 02:10:05
【问题描述】：

在 AMP HTML layout=responsive 中，仅使用宽度和高度属性保持我为图像提供的纵横比。有没有办法保持图像本身的纵横比？

【问题讨论】：

标签： amp-html

【解决方案1】：

如果你给 amp-img 一个容器 div（我个人在后端动态地做这个），实际上有一个解决方法

然后对容器应用一个高度，然后就可以使用css amp-img > img { object-fit: contain; }

这是我在 25,000 个页面中使用的完整示例，以保持我的页面图像具有正确的比例。

<div class="image"><amp-img width="400" height="225" layout="fill" src="foo.jpg"></amp-img></div>

请注意宽度/高度无关紧要，因为在使用 layout="fill" 时宽度和高度设置为容器的 100%。

【讨论】：

【解决方案2】：

不。您可以从后端或您正在使用的图像 API 获取纵横比信息，并将它们作为变量放入高度和宽度属性中。

在 github 上查看以下问题： https://github.com/ampproject/amphtml/issues/2039 https://github.com/ampproject/amphtml/issues/2939

【讨论】：