HTMLで画像サイズを変更する方法｜大きすぎる・はみ出るときの直し方

HTMLで画像を表示したときに、

このような経験はとても多いです。

そこでこの記事では、
初心者の方でもすぐできる画像サイズの直し方を、順番にわかりやすく解説していきます。

HTMLだけでも画像サイズは簡単に直せるので、ぜひ確認してみてくださいね！

HTMLで画像サイズが崩れるよくある原因

まず、HTMLで画像サイズが崩れるよくある原因からお伝えします。

なぜ画像が大きくなったりはみ出したりするのかを知っておきましょう。

元の画像が大きすぎる

スマホやカメラで撮った画像は、とても大きなサイズになっていることが多いです。

そのまま表示すると、画面からはみ出してしまいます。

サイズ指定をしていない

HTMLで画像を表示すると、基本的に元の大きさのまま表示されます。

<img src="sample.jpg">

これだと、大きな画像はそのまま大きく表示されます。

スマホ画面より画像が大きい

パソコンではちょうどよく見えても、
スマホでは画面が小さいため、画像がはみ出しやすくなります。

HTMLで画像サイズを変更する一番簡単な方法

では、HTMLで画像サイズを変更する一番簡単な方法をご紹介します。

widthで横幅を指定する方法

画像の横幅を決めるだけで、サイズはすぐ調整できます。

<img src="sample.jpg" width="300">

これで、画像の横幅が300pxになります。

高さは自動で調整されるので、画像がゆがむ心配もありません。

サイズの考え方（初心者向け）

たとえば、

という感覚でOKです。

まずは300～600くらいで試してみると調整しやすいです。

画像がはみ出るときのおすすめ直し方（スマホ対応）

画像がはみ出るときのおすすめ直し方をお伝えします。

スマホでも崩れないようにするなら、
自動で画面に合わせて縮小する設定がおすすめです。

<img src="sample.jpg" style="max-width:100%; height:auto;">

このコードの意味

これだけで、

状態になります。

初心者の方は、基本これを使えばほぼ問題ありません。

画像を小さくしてもきれいに表示するコツ

画像を小さくしてもきれいに表示するコツをご紹介します。

画像を調整するときの基本ルールはこちらです。

逆に、

と、画像がぼやけてしまいます。

よくある失敗パターンと直し方

よくある失敗パターンと直し方をご紹介します。

幅と高さを両方固定してしまう

<img src="sample.jpg" width="300" height="200">

これをすると、画像がゆがみやすくなります。

👉 基本は横幅だけ指定しましょう。

大きな画像をそのまま表示している

<img src="sample.jpg">

👉 width指定か、max-width指定を入れるだけで解決します。

スマホで横スクロールが出る

ほとんどの場合、これで直ります。

<img src="sample.jpg" style="max-width:100%; height:auto;">

HTMLで画像サイズを調整するときのおすすめ基本形まとめ

最後に、HTMLで画像サイズを調整するときの基本形をご紹介します。

固定サイズで表示したいとき

<img src="sample.jpg" width="400">

スマホ対応したいとき（おすすめ）

<img src="sample.jpg" style="max-width:100%; height:auto;">

この形が一番トラブルが少なく安心です。

まとめ

「HTMLで画像サイズを変更する方法｜大きすぎる・はみ出るときの直し方」の内容はいかがでしたでしょうか？

HTMLで画像サイズが崩れる原因はとても単純です。

そのため、ほとんどの場合、次のコードで解決します。

<img src="sample.jpg" style="max-width:100%; height:auto;">

これを使えば、

状態になりますよ。

私も、ホームページを作っているときに、画像がはみ出して形が崩れてしまうことをよく経験しました。

でも、どの画像の大きさが影響しているのかを見つけることができれば、解決は簡単なので、ぜひここでお伝えしたことを参考にしてくださいね！

画像トラブルの多くは、これだけで解決しますよ！