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

Question

在AMP HTML layout =仅使用宽度和高度属性保持我给图像的宽高比。有没有办法保持图像本身的宽高比？

Answer 1

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

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

Answer 2

有INFACT一个解决办法，如果你给放-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>

保持注意的宽度/高度并不重要作为宽度和高度当使用布局=“填充”将其自身设置容器的100％。