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

ちょうどamp対応する案件があったので参考までにメモとして残します。

amp対応する場合、画像は<img>ではなく<amp-img>にする必要があります。

しかし<amp-img>は通常のimgタグとは違い、widthとheightが必須です。
なので「記事などでどんな縦横比の画像が入るかわからない」というような場合には困ってしまいます。

amp-imgの設定方法

基本

設定の仕方はこんな感じです。

<amp-img src="500x800.jpg"
  width="500"
  height="800">
</amp-img>

ただこれでは完全に画像比率が固定されてしまいます。

レスポンシブにする

ampはモバイルで閲覧されることになりますので、色々なスマートフォンサイズを想定してレスポンシブにしておくのがベストかと思います。

レイアウト属性layout="responsiveを付ければ、入れた縦横の数字の比率で自動的に幅100%で伸縮するようになります。
cssの指定は必要ありません。

<amp-img src="500x800.jpg"
  width="500"
  height="800"
  layout="responsive">
</amp-img>

ただし比率は属性値に入力したサイズで固定されるので、どんな比率の画像がくるかわからない！という場合は強制的に伸ばされて表示されてしまいます。
なので、このhtmlにした上でcssを使って調整します。

レスポンシブの比率をcssで調整する

amp-imgのwidthとheightで固定された比率をcssで正しい比率に調整します。

img{
    height: auto;
}
.i-amphtml-fill-content{
    /* amp.cssを打ち消す */
    max-height: auto;
    min-height: auto;
}

一応、これで画像の比率は戻ります。

またimgにmax-widthをつければ最大幅が指定できるので画像を大きくしたくないという方にはオススメです。が、そうすると左に寄ってしまい、サクッと中央に寄せることが出来ませんでした…
（ちゃんと検証してないので何か方法があるかもしれません）

この方法の欠点ですが、<amp-img>のwidthとheightで指定した数値の比率の枠は残ってしまいます。
なので画像の比率によっては上下左右に余白が空いてしまう（background:contain;みたいな感じ）ので、完璧な対応とまではいきません。

※amp-imgには色々な属性が用意されていますので良かったらこちらも合わせてご確認ください。
Layout & media queries

サーバーサイドで画像サイズを計算してもらう

結局これが一番完璧です。
この方法がどうしても出来ない場合にのみcssでの調整をとりあえずの手段として検討してみてください！