HTMLの画像サイズ(widthとheight)の扱い方！

画像サイズ(widthとheight)の扱い方は、初学者の方が苦戦するポイントです。

下記のようなことが起きたこと、ありませんか？

• 画像のサイズをうまく指定できない
• 画像が大きく表示されて横スクロールしてしまう
• 画像が潰れた感じで表示されてしまう
• 画像がぼやけて(粗い)表示されてしまう

これらは画像サイズの扱い方を正しく理解していないと起きることです。

imgタグの使い方

画像の指定にはimgタグを使います。

<img src="..." alt="..." width="..." height="..." >

他にも入れた方が良い属性はありますが、初学者の方は一旦src / alt / width / heightを入れると覚えておくと良いです。

ただし、装飾目的の画像の場合alt属性は空にします。つまりalt=""このように書くということです。なくて良いのではなく、空にする点に注意してください。

画像のサイズ指定方法

例えば、横1200px / 縦600pxの画像を使う場合の書き方は下記のようになります。単位のpxは必要ありません。

<img src="..." alt="..." width="1200" height="600" >

このimgタグのwidthとheightで、画像の"表示サイズ"を指定すると思っている方が多いです。

それでもサイズ指定はできますが、常にそのサイズになってしまいます。実際は見ている環境によって、表示される画像のサイズは可変にすることが多いので、imgタグのwidthとheightでサイズ指定すると問題が起きます。

imgタグのwidthとheightで"表示サイズ"指定しない理由

上の動画の画像は、下記のコードです。CSSは全く指定していません。

<img src="https://placehold.jp/500x200.png" alt="..." width="500" height="200"/>

動画を見るとわかる通り、画像は常に横500pxで表示されているので、ブラウザの幅が500px以下の場合は、横スクロールしてしまいます。

この問題があるため、imgタグのwidthとheightで"表示サイズ"指定はしない方が良いです。※ ただし、imgタグのwidthとheightは必要です。その点については後述します。

画像の"表示サイズ"指定方法

まずは横スクロールを防ぐ

前述した通り、"表示サイズ"は、imgタグのwidthとheightではなく、CSSで指定します。

<img src="https://placehold.jp/500x200.png" alt="..." width="500" height="200"/>

img {
    width: 100%;
    height: auto;
}

このようにimgタグに対して、width: 100%;とheight: auto;を指定すると、画像は常に横幅100%で表示されます。それが下記の動画です。

こうすることで、横スクロール問題は防げました。ただし、どんなに小さい画像も親要素に対して100%で表示されます。

親要素にサイズ指定

横スクロールを防いだ上で、画像に幅を設定したい場合は、画像をdivタグなどで囲って、そのdivに対してサイズ指定すると良いです。

<div class="img-wrap">
    <img src="https://placehold.jp/500x200.png" alt="..." width="500" height="200" />
</div>

img {
    width: 100%;
    height: auto;
}
.img-wrap {
    width: 50%;
}

このような感じです。親要素の.img-wrapが50%でimgが100%ということは、imgは親要素に対して100%なので、下記の動画のように50%になります。

このように可変幅で指定すると、ブラウザの横幅よりも大きくなること(=横スクロールすること)はありません。

固定幅にもできる

<div class="img-wrap">
    <img src="https://placehold.jp/500x200.png" alt="..." width="500" height="200" />
</div>

img {
    width: 100%;
    height: auto;
}
.img-wrap {
    width: 200px;
}

例えば、この場合、親要素の.img-wrapが200pxでimgが100%だから、imgは200pxになります。

駆け出しの方を見ていると、大きめの固定値を入れて横スクロールしてしまっているケースが多いです。

今回の例のように200pxくらいでは、横スクロールすることはないと思って良いです。200px以下の環境で見ているユーザーはいないからです。

これが360pxくらいになると、自分の環境では良くても320px程度のSPを使っているユーザーの環境では、横スクロールしてしまいます。

【注意】imgタグのwidthとheightも必要

CSSでサイズ指定をするから、imgタグのwidthとheightはいらないと思ってしまいがちですが、imgタグのwidthとheightは必要です。

少し難しい話しになりますが、imgタグのwidthとheightがないとレイアウトシフトという現象が起きてしまいます。

詳しくは下記の記事をご覧ください。

レイアウトシフト(Cumulative Layout Shift)とは？対策・改善方法も紹介！

imgタグのwidthとheightには、画像そのものの幅と高さを指定すれば良いです。下記の赤枠の数値です。

画像に関するよくやりがちなミス

画像に関するよくやりがちなミスを3つ紹介します。

大きな固定値を入れる

既に説明していますが、1番多いミスなので、再度記載します。

大きな固定値を入れると、自分の見ている環境では問題なくてもユーザーの環境によっては、横スクロールする場合があります。

ほぼ確実にどんな環境でも横スクロールしないくらい小さい幅を除いて、widthに固定値は使わない方が良いです。

元画像より大きなサイズを指定する

• 元の画像は500px
• 表示サイズは1000px

このようなケースは、無理やり画像を引き伸ばして表示してるだけなので、画像がぼやけます。下記のようなケースです。

<div class="img-wrap">
    <img src="https://placehold.jp/500x200.png" alt="..." width="500" height="200" />
</div>

.img-wrap {
    max-width: 1000px;
}

1000pxで表示したい場合は、1000px以上の画像を用意して使いましょう。

本来は複数サイズの画像を用意して、ユーザーの環境によって出しわけをします。その方法は、中級者向けの内容なので、初学者の方は表示するサイズの2 or 3倍の画像を使うと良いです。そうすれば、おおよそ綺麗に表示されるはずです。

画像の出しわけに関しては、下記の記事をご覧ください。(中級者向け)

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

画像の比率を無視する

元の画像が横2000px/縦1000pxだとします。この場合、横：縦=2：1の比率を崩すと、画像が潰れて表示されます。下記のようなケースです。

<div class="img-wrap">
    <img src="https://placehold.jp/2000x1000.png" alt="..." width="2000" height="1000" />
</div>

img {
    width: 100%;
    height: auto;
}
.img-wrap {
    width: 1000px;
    height: 3000px;
}

見栄えが悪いので、画像の縦横比は崩さないように気をつけましょう。

そもそもimgにwidth: 100%;とheight: auto;が入っているので、.img-wrapでは、widthだけ指定すればOKです。heightは自動(auto)で決まります。

比率を崩してはいけないと書きましたが、object-fitを使うと、CSSで画像のトリミングが可能です。詳しくは下記の記事をご覧ください。

CSSで画像をトリミングする方法を紹介！

ケーススタディ

この動画のようなサイズ指定をすることを考えてみます。

HTML・CSSは下記のようになっています。

<div class="img01">
    <img src="https://placehold.jp/2000x600.png" alt="..." width="2000" height="600" />
</div>

<div class="img02">
    <img src="https://placehold.jp/1000x400.png" alt="..." width="1000" height="400" />
</div>

<div class="img03">
    <img src="https://placehold.jp/200x200.png" alt="..." width="200" height="200" />
</div>

img {
    width: 100%;
    height: auto;
}

ここから動画のような見た目になるように、CSSを書いていきます。

img01に関して

img01は、常に横100%になっています。imgにはwidth: 100%;が入っているので、.img01に指定するCSSはありません。

何もせずとも、動画のような挙動になります。

img02に関して

img02は、下記のような特徴があります。

• ブラウザの横500pxまでは100%で表示
• ブラウザの横500px以上では500px固定表示

この場合、下記のように書けば動画と同じ挙動になります。

.img02 {
    max-width: 500px;
}

imgにはwidth: 100%;が入っているので、横幅100%で表示されますが、max-width: 500px;を指定しているので、最大でも500pxにしかなりません。( = 幅を広げても500pxで拡大が止まってくれる )

img03に関して

img03は、常に100pxで表示されています。

そのため下記を入れれば良いです。

.img03 {
    width: 100px;
}

固定値ですが、100pxくらい小さいサイズであれば問題ありません。

全コードまとめ

余白や中央寄せするためのコードも含め、下記のコードで動画とおりになります。

<div class="img01">
    <img src="https://placehold.jp/2000x600.png" alt="..." width="2000" height="600" />
</div>

<div class="img02">
    <img src="https://placehold.jp/1000x400.png" alt="..." width="1000" height="400" />
</div>

<div class="img03">
    <img src="https://placehold.jp/200x200.png" alt="..." width="200" height="200" />
</div>

body {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.img02 {
    max-width: 500px;
    margin: 80px auto 0;
}

.img03 {
    width: 100px;
    margin: 80px auto 0;
}

カラクリ無しの完全無料！あなた専属のメンターが付く？