STEP B：画像がはみ出す・縮まない

visibility_off現象

• 画像がコンテナ幅を超えて左右にはみ出し、ページ全体が横スクロールしてしまう
• モバイル表示で画像が縮まらず、レイアウトが崩れる

---

help_outline原因

img がデフォルトでインライン要素かつ幅固定

ブラウザの標準設定では、親要素より大きい画像もそのままのサイズで描画しようとします。

CSSで縮小用のプロパティが指定されていない

max-width や height: auto を指定しないと、親要素の幅に合わせて自動でリサイズされません。

親要素に固定幅が設定されていて、画像がその枠をはみ出す

コンテナ側の width や overflow 設定の影響で、画像が正しく収まらない場合があります。

---

build対策・コード例

/* 画像を親幅に合わせて自動縮小する */
img {
  display: block;    /* 下の余白を消し、扱いやすくする */
  max-width: 100%;   /* 親要素より大きくならない */
  height: auto;      /* アスペクト比を保って縮小 */
}

/* 必要に応じてコンテナ側にも overflow を見直す */
.image-container {
  overflow: hidden;  /* はみ出しを隠す場合 */
  /* overflow: visible; 余白や影を正しく見せたい場合はこちら */
}

---

bug_reportデバッグ方法

開発者ツールで画像要素を選択し、「Computed」または「計算済み」パネルで`width`・`height`・`max-width`の実際に適用されている値を確認します。

また、コンテナの枠線や背景色を一時的に付けることで、はみ出し箇所を特定しやすくなります。

.image-container {
  outline: 1px dashed blue;
  background-color: rgba(0,0,255,0.05);
}

---

school応用ポイント：object-fit を使う

要素の大きさに合わせて画像の表示方法を「切り取り（クロップ）」や「フィット」させたい場合は、object-fitプロパティを使います。

img {
  width: 100%;
  height: 200px;        /* 固定高さ */
  object-fit: cover;    /* 縦横比を保ったまま、要素を埋め尽くすように切り抜く */
}

※object-fit: contain なら、縦横比を保ちつつ、画像全体が要素内に収まるように表示されます。

---

---