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.

https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/

つうことで、サイズが固定されたブロックの中で、画像に対してobject-fit: containを使えば良いとのことで、無事実装完了。

気になるこのobject-fitっつう、見慣れないCSSプロパティ。調べたら、background-sizeみたいな感じで、親ブロックに対するふるまいを定義出来るプロパティで、画像をクロップしたりするのに便利っぽい。たーだーしー、IEはゴリゴリ未対応!今回はAMPだからいいかな、ってことでこの件終了。

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.