HTMLでの画像の幅

デフォルトでは、画像は実際のサイズで表示されます。例えば、上で表示したスマイルの画像は、実際のサイズが 130 × 130 ピクセルであり、ブラウザで見る画像のサイズも同じです。

必要に応じて、画像のサイズを変更することができます。そのためには、 width 属性を使って幅を設定します。

例として、画像の幅を 100 ピクセルに設定してみましょう。そのためには、 width 属性の値に 100 という数字を指定します。以下のようにします：

width="100"

画面上では画像はどのくらいのサイズになるでしょうか？一見すると、設定した通り幅が 100 ピクセル、高さは設定していないので実際の高さ 130 ピクセルになるように思えるかもしれません。実際にはそうはなりません。

幅は確かに 100 ピクセルになります。一方、高さは画像の縦横比が崩れないように調整され、こちらも 100 ピクセルになります。

実行して確認してみましょう：

<img src="smile.png" width="100">

あなたの画像の幅を 300 ピクセルに設定してください。