ページがdivより小さい場合であっても、最小幅を持つdivに背景画像を集中させる

html

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

CSS

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

このコードは、ブラウザが#innerの960ピクセル幅より狭くなったときに、除外のように背景画像をうまく配置します。この狭いブラウザの場合、#innerと#outerは960pxの幅を期待通りに維持します(水平ブラウザのスクロールバーを指定します)。#outerの背景イメージは、#outer divの代わりにブラウザウィンドウに集中します。ブラウザウィンドウではなく、divに中央揃えされるようにバックグラウンドイメージを維持するにはどうすればよいですか?

1
たとえば、外側のdivが画面の右側から消えても、画面上にどのように画像が残っているかを確認します。 jsfiddle.net/5Kn7s
追加された 著者 mrtsherman,
実際これは本当に変です - jsfiddle.net/5Kn7s/1 赤い枠線に注意してください。外側のdivは、その子コンテナと一緒に成長していない???そのため、画像はスクリーンの中央にとどまります。
追加された 著者 mrtsherman,

1 答え

私は実際になぜこれが起こっているのか本当の答えを知らないのですが、外側に幅を適用すると、それはあなたが望む方法を表示するようになります。これはモデルがうまくいくとは思っていませんでした。非常に混乱 :/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

さて、これも動作しますが、IE7やIE6ではサポートされていません

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

これは非常に奇妙な振る舞いですが、幅が指定されていないdivがあり、子が親よりも広い場合でも、親は画面の幅と同じになります。

0
追加された