0

このチュートリアルの手順を使用して視差サイトを構築しています：http：//f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

チュートリアルのデモバージョンはこちらです：http：//f6design.com/projects/parallax-scrolling/

自分のコードを含める必要はないと思います。「流動的な画像」という大きな概念が欠けているだけだと思います...私が理解していることmax-width:100%から、すべてに「」を追加するだけで画像を流動的にすることができますページ上の画像。だから。これで、理論的には、幅がコンテナの幅img {max-width:100%}を超えない限り、これは機能するはずです。

http://f6design.com/projects/parallax-scrolling/の例に戻ります...画像に「」を追加してもmax-width:100%流動的な画像が得られないのはなぜですか。

ここで基本的な概念が欠けていますか？

ここで私が構築しているサンプルサイトを見ることができます：http：//alvarenga.co/liquid/index.html

基本的に、ページを縮小すると、ヘビやパララックスの背景要素も比例して縮小します...したがって、流動的な画像が必要になります。

高度なおかげで...

4

1 に答える 1

1

これは、を使用するよりも複雑ですmax-width。視差画像をビューポート（ブラウザウィンドウ）でサイズ変更し、自然なサイズを超えないようにするには、次の方法を試してください。

#parallax-bg3 {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}
#bg3-1 {
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    top: -111px;
    width: 100%;
}

上記のCSSは、具体的にはサンプルコード（HTML）用です。基本的に、これが起こっていることです：

  • #parallex-bg3流体幅のコンテナdivがあり100%ます。
  • #bg3-1コンテナ内に、画像の自然な幅と等しいdiv流動的な幅の画像があります。さらに、画像を中央に配置する必要があります（画像が最大幅に達すると、それ以外の場合はコンテナdivで左揃えになります）。100%max-widthmargin: 0 auto

ビューポートのサイズが変更されると、divのサイズが変更されてウィンドウが100％塗りつぶされ、画像のサイズも変更されてdivが100％塗りつぶされます。divと画像がそれを超えて大きくなること1920pxはないため、画像が大きくなりすぎることはありません。実際には、画像にを設定する必要はなくmax-width、コンテナだけを設定する必要がありますdiv。念のため追加しました。ただし、コンテナのdivが1920pxを超えることがない場合、画像も大きくなりません（幅が100％であるため）。

于 2013-01-22T04:22:20.573 に答える