• HOME
  • web
  • 中間幅の画像が暴走する現象を修正するコード

中間幅の画像が暴走する現象を修正するコード

スマホ↔︎PCの間の部分で リコピンカラムの部分の
画像がめちゃめちゃ大きくなってしまう
バグがある場合。

align-items: flex-start; を指定して、親の高さに引き伸ばされないようにする

他にも下記のような対応策が考えられる

  • 画像の height: auto、max-width: 100% を明示

  • object-fit: contain; で画像の縦横比を保持

  • 画像に aspect-ratio を指定すると安定しやすい（例：aspect-ratio: 4/3;）

  • メディアクエリで flex-direction の切り替えを丁寧に設定

  • 必要があれば max-height で画像の縦方向の暴走を制限