amp対応htmlを作成する際、amp-imgの画像サイズ・比率をCSSでなんとかする - Qiita

ちょうどamp対応する案件があったので参考までにメモとして残します。 amp対応する場合、画像は<img>ではなく<amp-img>にする必要があります。 しかし<amp-img>は通常のimgタグとは違い、widthとheightが必須です。 なので「記事などでどんな縦横比の画像が入るかわからない」というような場合には困ってしまいます。 amp-imgの設定方法 基本 設定の仕方はこんな感じです。 ただこれでは完全に画像比率が固定されてしまいます。 レスポンシブにする ampはモバイルで閲覧されることになりますので、色々なスマートフォンサイズを想定してレスポンシブにしておくのがベストかと思います。 レイアウト属性layout="responsiveを付ければ、入れた縦横の数字の比率で自動的に幅100%で伸縮するようになります。 cssの指定は必要ありません。