1

まず、ここに私のサイトがあります。

私はdivを持っています：

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 660px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100%;"> 
</div>

そして、そのdivに対応するCSSのビット：

div.home {
    width: 100%;
    margin-bottom: 30px;
    min-width: 100%; height: auto;
}

ご覧のとおり、margin-bottomしかし、何らかの理由で、その下の茶色のメニューとテキストは次のとおりです。

  1. ブラウザの幅が狭くなると、画像から離れすぎます。
  2. どちらもブラウザに反応しません。ブラウザが小さくなると、テキストはさらに遠くに移動します。

これがjsfiddleです。これが少しずれている場合は、お詫びします。まだJsfiddleをマスターしています。

4

3 に答える 3

2

これはどうですか：jFiddleを更新しました。基本的に、DIVコンテナの子IMGとして背景画像を追加して、入力しました。次に、このDIVのサイズを制御して、必要なアスペクトを与えることができます。

私はあなたが何を求めているのか完全には理解していないと思うので、これが間違った方向に向かっている場合はお詫びします。

于 2012-08-09T08:17:05.913 に答える
1

マージンボトムとは関係ありません。divは660pxの高さに設定されています。ブラウザウィンドウの幅が背景画像に対して十分でない場合は、それに応じて拡大縮小され、アスペクト比が維持されます。マージンが広くなっているように見えますが、実際には、空で表示されているdivの一部です。何をしたいのか完全にはわかりませんが、divの高さを動的に調整することをお勧めします。

于 2012-08-09T08:25:18.250 に答える
1

問題はメニューよりも幅が広いことだと思いcontent_containerます。ページのこの行を変更した場合： 

<div id="content_container" style="width: 816px;">

これに：

<div id="content_container" style="width: 720px;">

...うまく機能しています

于 2012-08-09T08:25:56.143 に答える