【HTML】img(画像)のサイズの変え方【属性とプロパティを使う】

「HTMLのimg(画像)のサイズ指定のやり方をはっきりさせたい…。」と思ったことはありませんか？

コーディングをしていて、画像のサイズを指定するのはよくあることです。

この記事では、「imgのサイズの変え方」と「よくあるサイズ指定の方法の例」を解説していきます。

それではまず、「imgのサイズの変え方」を見ていきましょう。

【HTML】img(画像)のサイズの変え方

このパートでは、「画像サイズの変え方」「横幅と高さの比率の保ち方」の2つを解説していきます。

画像のサイズの変え方

画像のサイズの変更方法は以下の2つがあります。

1. HTMLのwidth属性、height属性を使う
2. CSSのwidthプロパティ、heightプロパティを使う

HTMLとCSSの両方で画像サイズの指定ができるということです。

HTMLの場合は以下のように書きます。

<img src="image.jpg" width="640" height="427" alt="" />

imgタグにwidth属性とheight属性をつけるというかたちになります。

※単位は「px(ピクセル)」になります(書かなくてOKです)。

CSSを使う場合は以下のように書きます。

<img src="image.jpg" alt="" />

img {
  width: 640px;
  height: 427px;
}

widthプロパティとheightプロパティを使うかたちになります。

ちなみに長さの単位に関しては、「px」のほかに「%」で指定することもできます(「%」は親要素に対しての割合のこと)。

画像サイズの変更は、HTMLの属性と、CSSのプロパティでできるということを覚えておきましょう。

横幅と高さの比率の保ち方

結論からいうと、width(横幅)の長さのみを指定すると、自動でタテ(高さ)の長さが比率をそのままに保ったまま決まります。

また、逆の場合も同じです(heightの長さのみを指定すると、横幅が決まる)。

自動で決まらないと不便なのでこのような機能があります。

具体的に見ていきましょう。

下の画像が元のサイズです。

この画像のwidthの値だけを変えます。

<img src="image.jpg" width="200" alt="" />

or

<img src="image.jpg" alt="" />

img {
  width: 200px;
}

※HTMLでもCSSでもどちらで指定してもかまいません。

すると、以下のようになります。

横幅と高さの比率がそのままに、サイズが小さくなってるのがわかります。

また、width属性とheight属性でサイズを決めてしまった後でも、CSSを「height: auto;」もしくは「width: auto;」にすると比率が自動補正されます。

たとえば、HTMLを以下のように書いているとします。

<img src="image.jpg" width="300" height="500" alt="" />

画像が縦に引き伸びてしまっています。

これに「height: auto;」をつけると以下のようになります。

img {
  height: auto;
}

また、「width: auto」をつけると以下のようになります。

img {
  width: auto;
}

「height: auto;」では横幅を、「width: auto;」では高さを基準にして比率を補正して上書きします。

比率をそのままにしたいときは、widthかheightの片方だけを変えるか、CSSの「auto」値を使い上書きしましょう。

よくあるサイズの指定方法の例

ここからは、画像のよくあるサイズ指定の方法の例を2つみていきます。

ヘッダー用の画像を横幅いっぱいにする

widthを100%に指定することで、画像を横幅いっぱいに表示することがあります。

<img src="image.jpg" alt="" />

img {
  width: 100%;
  height: 600px;
}

横幅いっぱいに表示することで視覚的にインパクトが与えられ、かつWebページのデザインにメリハリが生まれます。

横幅いっぱいは100%ではなく、100vwでも指定できます。

「100%」は親要素の大きさに合わせるのに対し、「100vw」は画面幅に合わせます。

つまり、100%は親要素の横幅になり、100vwは画面の横幅になるということです。

また、横幅いっぱいにする注意点として、小さいサイズの画像を横に引きのばすと、画質が粗(あら)くなってしまうということが挙げられます。

そもそもの画像の大きさや画質をチェックしてからサイズを変更するようにしましょう。

ヘッダー画像を横幅いっぱいに表示するのはよくある手法なので、チェックしておいてください。

横並びの要素の幅を%指定する

横並びの要素の幅を%指定することもあります。

pxを決めなくても、横並びにする要素の個数で全体の何%かを考えられるためです。

例えば、下のようにコードを書きます。

<div id="container">
  <img src="image.jpg" alt="" />
  <img src="image.jpg" alt="" />
  <img src="image.jpg" alt="" />
</div>

#container {
  display: flex;
  justify-content: center;
}
img {
  width: 30%;
  margin-right: 7px;
}

出力すると以下のようになります。

3つの要素を横並びにしているので、横幅を30%に指定してみました。

こうすることで、pxの値を考えなくても調度いいくらいの横幅に指定することができます。

また、画面(ウィンドウ)の幅をせばめたときに、1つの要素当たりの長さが30%になるように自動で調整されます。

※横並びにするために親要素のCSSに「display: flex;」を適用しています。

　「display: flex;」に関しては、以下の記事でも解説していますのでチェックしてみてください。

横並びの要素の幅を%指定するという手法があることもおさえておきましょう。

まとめ

HTMLのimg(画像)のサイズの変更方法の理解が深まりましたか？

画像サイズの変更はよくすることなので、この機会にしっかりおさえておきましょう。

今回の知識をもとに、ぜひブラウザ上に表示させてためしてみてください。