有沒有辦法在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％。