コンテンツへスキップ

イメージ(画像)を埋め込む方法

桜

画像を表示するには <img src="" alt=""> を使います。

終了タグは要りません

src に画像名を記入します。

alt には画像が表示できなかった場合に表示するテキストを記入します。

<img src="sakura.jpg" alt="桜">

上記のHTMLをブラウザで表示すると以下のように画像が表示されます。

桜

画像のサイズを変更する

画像のサイズをHTML内で変更する場合はimgタグ内にwidthheightを入れます。

下記のHTMLは横幅を300pxにし、高さをautoにすることで比率を保ったまま画像を縮小しています。ここで横幅も高さも適当な数値で指定すると画像が引き伸ばされてしまいます。

<img src="sakura.jpg" alt="桜" width="300" height="auto">
桜

CSSで画像のサイズを指定する

<img src="sakura.jpg" alt="桜">
img {
  width: 300px;
  height: auto;
}

このCSSの記述でも同様に縮小された画像が表示できます。

変更しやすくするために、なるべくCSSで記述するようにしましょう。

タグ: