通常のウェブサイトをAMPに対応させる場合、img
タグをamp-img
タグに変更する必要があります。その際に**「サイズの分からないこの画像、どうやって表示させればいいんだ…」**と頭を悩ませていたんですが、公式に答えがありました。公式 is 神。
We can solve this problem by combining AMP's fill layout with the object-fit CSS property. The object-fit property helps us ensure that the image maintains its aspect ratio while being resized via the fill layout.
つうことで、サイズが固定されたブロックの中で、画像に対してobject-fit: contain
を使えば良いとのことで、無事実装完了。
気になるこのobject-fit
っつう、見慣れないCSSプロパティ。調べたら、background-size
みたいな感じで、親ブロックに対するふるまいを定義出来るプロパティで、画像をクロップしたりするのに便利っぽい。**たーだーしー、IEはゴリゴリ未対応!**今回はAMPだからいいかな、ってことでこの件終了。