タイトルを書いてみてすごく伝わりにくいんですが、メイン画像がコンテンツよりはみ出ているデザインがよくやってきます。最近続いたのでメモ。
こういうデザインです。
これでウィンドウサイズが小さくなったときにも水色部分の画像サイズは変えたくないし横のスクロールバーも表示させたくないという場合ですね。
imgタグを使って表示する場合
このhtmlはコンテンツの幅を定義してるwrapの外に書いて下さい。
img-wrapではoverflow: hidden;で横スクロールバーが出ないようにします。
img-wrap-inのmargin-leftはwidthの半分の数値を指定します。
backgroundで表示する場合
画像をbackgroundで出してもいいようであればcenter配置で、高さを指定して表示するのも良いです。
テキスト飛ばし問題や空divなどどれくらいSEOに影響があるのかわかりませんが、テキスト情報の入った画像はなるべくimgタグで表示してaltにテキストを入れるようにしています。
