大きな画像のまとめ

3つのページの結果

「32pxから336pxの画像」「max-width:100%の指定」「大きな画像」のまとめです。

使用した環境は主に Android 6.0.1 上の Chrome 60.0.3112.107 です。

次のモバイル環境の画素数ではAndroidの他のバージョンも含めて実験しています。

大きな画像(viewありそのまま)

メインのゴマフアザラシの写真は 横2880,縦1620 です。viewportの指定をしていても、右上の[前][目][次]のリンクが小さくなるので、下方に次への画像のボタンを加えました。336はこの画像の大きさが縦横ともに336ピクセルであることを表します。

大きな画像(viewなしそのまま)

<meta name="viewport" content="width=device-width"

の指定なしです。

viewport の指定を外してみました。基本的には変わりありません。「大きな画像」というh2タグの背景色の範囲が異なりますが、これは環境により異なり、また別に考察します。

viewport の指定なしのページは残していません。

max-width指定

このページにも書きましたが、画像にmax-width:100%を指定しました。画像はpタグに入れられているのでpタグの内部の幅を全部使う(100%)ところまで縮小されます。

この幅を超える画像は縮小されますが、この幅に満たない画像は拡大されません。ここにも「次へ」の画像のボタンがありますが、64と書いてあります。これは縦横ともに64ピクセルであることを表します。これは拡大・縮小されていません。(実は拡大されていると言えないこともないのですがこれは後述)

このmax-width:100%はPCのブラウザでも支障なく働きます。モバイル対応でもPCの表示に悪影響はありません。

縮小されない大きさは

この幅を超える画像は縮小されます、と書きましたが「この幅」はどれぐらいでしょうか。

32pxから336pxの画像を並べてスクリーンショットを実測した結果は、336pxからは縮小されています。ただし、▷の周りの余白を含めての336pxで、pタグのmargin,paddingもありますから、336という数値が上限という意味ではありません。

結論

写真などの大きな画像は

img {max-width:100%;}

を加える

このページのスクリーンショットとその説明は

img.ssc {
  max-width:50%;
}

としています。その上で、float:left;を指定し、右側に説明文を流し込んでいます。

img.ssc {
  max-width:50%;
  float:left;
  margin-right:1em;
  margin-bottom:1em;
  vertical-align:text-bottom;
}