画像のサイズ指定

この画像のサイズは240×260pxである。
この画像のwidthはスマホの横幅におさまるが、サイズによってはスマホのような狭い横幅(300px強)では画面からはみ出ることがある。
以下のパターンはいずれも元の画像のサイズで表示される。
  1. 「width="240" height="260"」


  2. 「width="auto" height="auto"」


  3. 「width,heightの指定なし」

また、四方を角丸にすることもできる。書き方は(3)のパターン。


  1. 「width="100%" height="auto"」
  2. 「width="100%"」(heightの指定なし)
スマホを縦置きにしても横置きにしても画面の横幅いっばいに画像が拡大されて表示される。



画像を縮小する場合は別に計算した数値(ピクセル)を指定することになる。
たとえば下記は「width="120" height="130"」とした場合である(横縦ともに半分)。




imgタグの「%」指定

次のような画像がある(元画像)。170×50pxである。



この画像で「width="20%" height="20%"」とすると次のようになる。



「width="10%" height="10%"」とすると次のようになる。



「width="50%" height="auto"」とすると次のようになる。



「width="50%"」とすると次のようになる。heightは書かない。



「width="100%" height="auto"」とすると次のようになる。



縮小するには元の画像のサイズから計算した縮小数値(px)を書くしかない(20%縮小したもの)。



総括
この「%指定」は、ディスプレイの横幅を100%として、その割合を指定するものである。
元の画像に対する割合を指定するものではない。
100%は画面の横幅いっぱいの大きさ、50%は画面の横幅の半分の大きさになる。