3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AMPでサイズ不明の画像を表示する

Last updated at Posted at 2018-05-09

通常のウェブサイトを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だからいいかな、ってことでこの件終了。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?