画像を表示するには <img src="" alt="">
を使います。
終了タグは要りません。
src
に画像名を記入します。
alt
には画像が表示できなかった場合に表示するテキストを記入します。
<img src="sakura.jpg" alt="桜">
上記のHTMLをブラウザで表示すると以下のように画像が表示されます。
画像のサイズを変更する
画像のサイズをHTML内で変更する場合はimg
タグ内にwidth
やheight
を入れます。
下記のHTMLは横幅を300
pxにし、高さをauto
にすることで比率を保ったまま画像を縮小しています。ここで横幅も高さも適当な数値で指定すると画像が引き伸ばされてしまいます。
<img src="sakura.jpg" alt="桜" width="300" height="auto">
CSSで画像のサイズを指定する
<img src="sakura.jpg" alt="桜">
img {
width: 300px;
height: auto;
}
このCSSの記述でも同様に縮小された画像が表示できます。
変更しやすくするために、なるべくCSSで記述するようにしましょう。