image - ページの幅を設定するブラウザウィンドウを超えて画像が広がるのを防ぐにはどうすればよいですか?

Question

現在、開発中のサイトのナビゲーションシステムとして機能している長い画像があります。ここで見ることができます。このナビゲーションシステムは最終的に小さなセクションに分割されますが、現在見ているのと同じ問題が発生する可能性があると思います。

画像の幅は 1920px で、ユーザーのブラウザーウィンドウの幅 (最大 1920px) に関係なく、ナビゲーション画像 (分岐) は常に画面からはみ出します。ナビゲーションシステムの中央にあるリーフは、上のロゴと一致するように常にページの中央に配置する必要があります。

現在、ナビゲーション DIV には次の CSS があります。

#nav {
    position: absolute;
    top: 210px;
    left: 50%;
    margin-left: -960px;
}

本文の最小幅は 900px です。

このセットアップには 2 つの問題があります。

ページにアクセスするとわかるように、ブラウザウィンドウの幅が 100% に設定されるようにするには、ナビゲーションシステムの長い画像の右端によってブラウザページの幅が設定されています。ブラウザウィンドウの幅が 900px 未満の場合は 900px を超え、(水平スクロールバーを使用して) 900px まで。
ナビゲーションシステムは本文の最小幅を考慮していません。つまり、ブラウザウィンドウの幅が 900px 未満の場合でも左に移動し続けますが、ページコンテンツの残りの部分はそうではありません。

誰かがこれらの問題を手伝ってくれますか?

ありがとう、

ニック

score 1 · Accepted Answer

私がすることは

画像の中央部分をdiv100% 幅で

background-image: url(/path/to/slice.png);
background-repeat: repeat-x;

これにより、ページを不必要に拡大することなく、サイズを無限に変更できるナビゲーション領域が得られます。

1 に答える 1