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を使えば良いとのことで、無事実装完了。


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