有没有办法在amp-img标签中保留原始图像宽高比？

Question

在AMP HTML布局中=仅响应仅使用width和height属性保持我给图像的宽高比。有没有办法保持图像本身的宽高比？

Answer 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％。

Answer 2

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

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