LoginSignup
29

More than 5 years have passed since last update.

サイズのわからない画像のAMP対応

Last updated at Posted at 2016-04-12

AMP⚡️(Accelerated Mobile Pages)に対応したサービス増えてきました。
AMPのページではできることが少ないので、対応は簡単です。(元の仕様を削るのが大変)

AMPで画像を表示するには<amp-img>タグを使う必要があります。

例えばこんな感じ

<amp-img src="sample.jpg" width="300" height="300"></amp-img>

しかし、
ソーシャルAPIから引っ張ってきた画像、そもそも画像サイズを保存していないなど、画像サイズがわからないとき
width、heightを省略してみると

<amp-img src="sample.jpg"></amp-img>

AMPはエラーに・・・
アスペクト比が固定の画像であれば適当でも良いですが、そうでない場合画像が歪みます。

解決策1

layout="fixed-height"を使い高さのみ固定にして、幅はレスポンシブに任せる
詳しい使い方はLayout

<amp-img src="sample.jpg" layout="fixed-height" height="300"></amp-img>

解決策2

とりあえず数値は入れておき、CSSで元の形に戻す

html
<amp-img src="sample.jpg" width="300" height="300"></amp-img>
css
amp-img img{
  width: auto;
  height: auto;
}

解決策3

サーバーサイドで計算する。

とりあえずこれで歪まなくなります。
解決策1も解決策2も高さが固定されるので、画像によってはマージンが空いたりします。CSSsizesなどとも組み合わせてうまくやりましょう。

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
29