0

それで、私は最初のレスポンシブ デザインを行っています。コントロール フリークなので、非常にいらいらしますが、要点を言えば。

上部にカルーセルがある典型的なレイアウトを作成しました。ページ全体のサイズが適切に変更され、それは問題ではありません。

私の問題は、スライダーには非常に大きな画像が含まれているため、下のコンテンツが最初に読み込まれ、次にスライダーが読み込まれるとコンテンツが下にシフトすることです。これは当然のことであり、通常は、その移動を防ぐためにスライダー コンテナーに固定の高さを設定します。

ここで問題があります。レスポンシブ コンテナーに固定の高さを設定できず、そのコンテンツ シフトを防ぐ方法がわかりません。

編集

問題を説明するためにjsFiddleを作成しましたが、画像をキャッシュするため、出力htmlをローカルで実行してコンテンツのシフトを確認する必要があります。

http://jsfiddle.net/4mZyF/7/

皆さんは普段何をしていますか？何か案は？

4

5 に答える 5

1

何年も経ちましたが、最近私はそれに対処しなければなりませんでした。イニシャルの画像の寸法を測定して縮尺を取得します。私の画像は 1920X480px の画像なので、縮尺率は 25% になります。コンテナーの css、height: 0; に割り当てます。パディング底: 25%; そしてうまくいくでしょう（うまくいけば）:)

于 2016-07-28T10:17:27.943 に答える
0

このコンテンツシフトの修正を見つけましたか？私はまったく同じ問題を抱えており、それを修正するのにも苦労しています。これまでのところ、表示されたliに対して非常に高速な.hide（1）を作成してから、低速の.fadeIn（300）を作成しました。正常に動作しますが、完全ではありません。記事を下にスライドさせても問題がない場合は、.slideDown（）を使用できます。これは、主にコンテンツがそれ自体で上にスライドし、記事がそれを押し戻すことができるため、非常にうまく機能します。問題は、画像を下にスライドさせたくないということです。

于 2012-10-16T00:48:05.010 に答える
0

各画像の元のサイズを保存し、画像が入るスペースの幅を計算して画像の高さを計算し、画像のコンテナの高さをアニメーション化して、下のテキストがスムーズに上下に移動できるようにしますか?

それでも、さまざまな高さの画像をカルーセルで上下に移動させることは、コンセプトを誤解しない限り、ユーザーの目にはほとんど良くありません!

于 2012-10-16T00:55:54.190 に答える
0

あなたの問題は実際には次の方法で解決されます。

  1. 画像タグの寸法を設定する
  2. デフォルトで最初の画像を表示します (既にソースに含まれています)。
于 2012-09-19T22:48:51.063 に答える
0

すべての画像が元々同じ幅/高さである場合、スライダー ラッパーの幅を使用して画像の高さを予測しmin-height、ラッパーの を一致するように設定できます。

$(document).ready(function(){
    var widthOfWapper = $('.slider-wrapper').width();
    var widthOfImages = 940;
    var heightOfImages = 480;
    var imageScale = widthOfWrapper / widthOfImages;

    $('.slider-wrapper').css({
        'min-height': (heightOfImages * ImageScale) + 'px';
    });
});

理想的ではありませんが、シナリオでは機能する可能性があります。

于 2012-09-19T21:50:09.013 に答える