目次
はじめに：画像サイズが思い通りにならない理由
HTMLで画像を表示したときに、
- 画像が大きすぎる
- サイズを変えたら縦横が崩れた
- スマホで画像がはみ出る
といった悩みを感じたことはありませんか？
画像サイズの問題は、
imgタグとCSSの役割を正しく理解していないことが原因で起こることがほとんどです。
この記事では、
HTML初心者がつまずきやすい
img画像サイズの変更方法を基礎から分かりやすく解説します。
imgタグの基本構造
まずは img タグの基本を確認しましょう。
<img src="sample.jpg" alt="サンプル画像">imgタグは 単体で完結する要素で、
表示サイズは指定しない場合、画像本来のサイズで表示されます。
HTML属性で画像サイズを変更する方法
もっともシンプルな方法が、
width と height 属性を使う方法です。
<img src="sample.jpg" alt="サンプル画像" width="300" height="200">ポイント
- 単位はpx（数字のみ）
- 縦横両方指定すると比率が崩れる可能性あり
- レスポンシブには不向き
widthだけ指定して比率を保つ方法
縦横比を保ちたい場合は、
widthのみ指定するのが基本です。
<img src="sample.jpg" alt="サンプル画像" width="300">この場合、
高さは自動計算され、画像の比率は崩れません。
CSSで画像サイズを変更する方法（推奨）
実務では、
CSSでサイズ調整する方法が最もおすすめです。
<img src="sample.jpg" alt="サンプル画像" class="img-sample">.img-sample {
width: 300px;
height: auto;
}CSS指定のメリット
- レスポンシブ対応しやすい
- デザイン調整が柔軟
- HTMLがスッキリする
レスポンシブ対応の基本
スマホ対応では、
画像が画面幅を超えないようにすることが重要です。
img {
max-width: 100%;
height: auto;
}これを指定するだけで、
- 画面幅に合わせて縮小
- 画像の縦横比を保持
といった効果が得られます。
親要素に合わせて画像サイズを調整する
画像を枠いっぱいに表示したい場合は、
親要素との関係を理解する必要があります。
.image-wrap img {
width: 100%;
height: auto;
}これにより、
親要素の幅に合わせて画像が伸縮します。
画像が崩れる原因と対策
よくある失敗例を整理します。
原因①：widthとheightを両方固定
img {
width: 300px;
height: 300px;
}→ 元画像と比率が違うと歪む
対策
img {
width: 300px;
height: auto;
}原因②：CSSが効いていない
- クラス名の指定ミス
- 優先度の問題
- キャッシュ
CSSが反映されない場合は、
これらを確認しましょう。
object-fitを使った応用テクニック
画像を枠にフィットさせたい場合は
object-fit が便利です。
.img-cover {
width: 300px;
height: 200px;
object-fit: cover;
}よく使う値
- cover：枠いっぱいに表示
- contain：全体を収める
HTMLで画像サイズを変更するときの考え方
迷ったときは、次の基準で判断しましょう。
- サイズ指定 → CSS
- 比率保持 → height:auto
- スマホ対応 → max-width:100%
- 枠に合わせる → object-fit
この考え方を覚えるだけで、
画像サイズ調整のトラブルは大幅に減ります。
まとめ：img画像サイズはCSSで制御するのが基本
HTMLで画像サイズを変更する方法は複数ありますが、
現在のWeb制作では CSS指定が基本 です。
- HTMLは構造
- CSSは見た目
という役割分担を意識することで、
レスポンシブにも強く、保守性の高いコードになります。
初心者の方は、
まず width + height:auto + max-width を
セットで覚えるのがおすすめです。
ぜひ実際の制作で試してみてください。