響應<amp-img>與集裝箱高度

Question

我想在文本行內嵌入一個小的<amp-img>。用例是在一行文本中插入乳膠公式。我事先知道圖像的寬度和高度，但我不知道該行文本的高度，因爲行高對瀏覽器大小（桌面文本較大，手機文本較小）的響應作出了響應。

<amp-img layout=responsive>根據容器的寬度按比例調整圖像大小。是否有類似的機制可以根據容器的高度按比例調整圖像大小？

Answer 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更多信息。