目次
- はじめに：なぜ画像サイズは毎回トラブルになるのか
- 結論：画像サイズはCSSで制御するのが基本
- imgタグの基本構造
- HTMLのwidth・height属性で変更する方法
- 特徴
- なぜ縦横が崩れるのか
- 安全策
- CSSでサイズ指定する方法（推奨）
- なぜCSSが良い？
- レスポンシブで最重要の指定
- これで解決できること
- 横スクロール問題の原因
- 親要素に合わせて拡大・縮小する方法
- object-fitで枠にフィットさせる
- coverとは？
- containとは？
- DevToolsで確認する手順
- よくある失敗例
- ① widthとheight両方固定
- ② CSSが効いていない
- ③ 親要素がflexで崩れる
- スマホ崩れを防ぐための基本セット
- 画像サイズ調整チェックリスト
- HTML属性とCSSの役割分担
- まとめ：迷ったらこの3点
はじめに：なぜ画像サイズは毎回トラブルになるのか
画像サイズ調整は、初心者が必ず一度はつまずくポイントです。
- 画像が大きすぎる
- widthを変えたら縦横が崩れた
- スマホで横スクロールが出る
- CSSが効いていない
私も最初は「とりあえずwidth指定すればいい」と思っていました。
でも実際は違います。
画像サイズ調整は「仕組み理解」が9割です。
この記事では、
- HTML属性とCSS指定の違い
- なぜ比率が崩れるのか
- レスポンシブで安全な書き方
- 横スクロール問題の回避
- object-fitの正しい使い方
まで、実務目線で解説します。
結論：画像サイズはCSSで制御するのが基本
現代のWeb制作ではこれが原則です。
img {
max-width: 100%;
height: auto;
}まずはこの2行を覚えてください。
imgタグの基本構造
<img src="sample.jpg" alt="サンプル画像">サイズ指定がなければ、
画像本来のピクセルサイズで表示されます。
HTMLのwidth・height属性で変更する方法
<img src="sample.jpg" alt="サンプル画像" width="300" height="200">特徴
- 数値のみ（px扱い）
- シンプル
- レスポンシブに弱い
なぜ縦横が崩れるのか
元画像が 600×400 なのに、
width="300" height="300"とすると、比率が変わるから歪みます。
安全策
<img src="sample.jpg" width="300">高さは自動計算されます。
CSSでサイズ指定する方法（推奨）
<img src="sample.jpg" class="img-sample">.img-sample {
width: 300px;
height: auto;
}なぜCSSが良い？
- レスポンシブ対応しやすい
- デザイン変更が楽
- HTMLがスッキリする
レスポンシブで最重要の指定
img {
max-width: 100%;
height: auto;
}これで解決できること
- スマホではみ出さない
- 横スクロール防止
- 比率維持
横スクロール問題の原因
実務で多いのはこれ。
- width:1200px 固定
- max-width未指定
- 親要素より大きい
対策：
img {
max-width: 100%;
}親要素に合わせて拡大・縮小する方法
.image-wrap img {
width: 100%;
height: auto;
}これで親要素基準になります。
object-fitで枠にフィットさせる
画像トリミング的に使う場合。
.img-cover {
width: 300px;
height: 200px;
object-fit: cover;
}coverとは？
枠を埋めるが、はみ出しはトリミング。
containとは？
全体を収めるが余白が出る。
DevToolsで確認する手順
サイズがおかしいときは必ず見る。
- Elementsでimgを選択
- Computedタブでwidth確認
- 親要素のwidth確認
- overflow確認
レイアウトは必ずDOMに答えがあります。
よくある失敗例
① widthとheight両方固定
img {
width: 300px;
height: 300px;
}→ 歪みます。
② CSSが効いていない
原因：
- クラス名ミス
- 優先度不足
- キャッシュ
③ 親要素がflexで崩れる
flex環境では、
img {
max-width: 100%;
}が特に重要。
スマホ崩れを防ぐための基本セット
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}これだけで事故率は激減します。
画像サイズ調整チェックリスト
✔ widthは固定しすぎていないか
✔ height:autoになっているか
✔ max-width:100%があるか
✔ 親要素より大きくなっていないか
✔ object-fitの用途は正しいか
HTML属性とCSSの役割分担
- HTML → 構造
- CSS → 見た目
サイズ指定はCSSで管理するほうが保守性が高い。
まとめ：迷ったらこの3点
画像サイズ調整の基本はこれ。
img {
max-width: 100%;
height: auto;
}そして覚えるべき考え方は、
- 比率は自動維持させる
- 固定値を乱用しない
- 親要素との関係を見る
仕組みを理解すれば、
画像トラブルはほぼ解消します。
まずはこの基本から実践してみてください。