レスポンス<amp-img>コンテナの高さは

Question

です。<amp-img>をテキストの行にインラインで入れたいと思います。ユースケースは、テキスト行にラテックス式を挿入することです。私は画像の幅と高さを事前に知っていますが、ブラウザのサイズの変化に応じて行の高さに応じてテキストの高さを知ることはできません（デスクトップではテキストが大きく、携帯電話ではテキストが小さくなります）。

<amp-img layout=responsive>は、コンテナの幅に基づいて画像サイズを比例して調整します。コンテナの高さに基づいてイメージのサイズを比例的に調整するのに使用できる同様のメカニズムはありますか？

Answer 1

レスポンスレイアウトについてチェックすると、要素はコンテナエレメントの幅に合わせてサイズが変更され、自動的にwidth属性とheight属性で指定された縦横比にサイズが変更されます。このレイアウトは、amp-img、amp-videoなど、ほとんどのAMP要素でうまく機能します。使用可能な領域は親要素に依存し、max-width CSSを使用してカスタマイズすることもできます。

他のウェブサイトと同じように、ページレイアウトを制御して動作する@mediaもチェックしてください。ブラウザウィンドウのサイズや向きが変更されると、メディアクエリが再評価され、要素が非表示になり、新しい結果に基づいて表示されます。

<amp-img 
media="(min-width: 650px)" 
src="wide.jpg" 
width=466 
height=355 
layout="responsive" > 
</amp-img> 

詳しくは、SO questionをご確認ください。