LoginSignup
29

More than 5 years have passed since last update.

posted at

updated at

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

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
What you can do with signing up
29