ページの幅が小さくなったときに画像がはみ出る場合に、上左で合わせるのではなく中央に合わせる方法です。
下の埋め込みのResultだとページの幅を変えられないので、右上の「EDIT ON CODEPEN」をクリックして編集ページでウインドウ幅を変えてみてください。。
See the Pen centering overflow image by nakasu (@znuko) on CodePen.
画像をピッタリ納めたい場合は、表示領域の高さと画像自体の高さを揃えてください。
img タグではもう height は指定できないので、画像編集ソフトであらかじめ画像のサイズを調整しないとダメみたいです。
もっと賢い方法があったら教えてください。
追記
backgroud-image で設定する方法がありました。
テキストを重ねるのも簡単なので、こっちの方がいいかも。
See the Pen centering overflow background-image by nakasu (@znuko) on CodePen.
