0

ここでフルスクリーンのスライドショーのような効果のjsFiddleコードを作成しようとしていますが、その方法について疑問があります。私の例のフィドルからわかるように、画像を歪ませずに（画面に合わせて）できるだけ大きくしたいと思います。また、垂直方向と水平方向の中央に配置したいと思います。

水平方向のセンタリングはcssで処理されますが、垂直方向のセンタリングにはJavaScriptを使用する必要がありました。

私の質問は次のとおりです。

  1. これを行うためのより良い方法はありますか（たとえば、すべてCSSで）？
  2. 最初の読み込み時に、画像が（拡大縮小される前に）ビューポートよりも広い場合、スクリプトがビューポートの高さを計算している間、スクロールバーが表示されます。これは、スクリプトがdivとimgをウィンドウに合わせると、下部に白いギャップ、つまりスクロールバーの高さが存在することを意味します。これはoverflow：hiddenを指定することで回避できますが、少し回避策のようです。もっと良い方法はありますか？画像を切り替える方が良いでしょうか？
  3. divが画像よりも広くなるようにサイズを変更すると、黒いdivの下に白いセクションが表示され、垂直スクロールバーが作成されます。繰り返しますが、overflow：hiddenでこれを取り除くことができますが、そのアプローチは好きではありません。なぜそこにあるのか、どうやって取り除くのか知りたいのですが？
  4. 水平スクロールバーを表示させたり、サイズを変更すると点滅したりすることがあります。overlay：hiddenはこれを修正しますが、よりクリーンなソリューションが必要です。
  5. これをコーディングするためのより良い方法はありますか、または私のjQuery / Javascriptをさらに最適化できますか？
4

4 に答える 4

1

私はあなたが求めていたものを達成するための純粋なhtml/cssのクロスブラウザソリューションを知りません。アスペクト比と流動的な幅を持つ要素は、ブラウザがスクロールバーの表示/非表示を決定したときに「競合状態」を引き起こします。ブラウザは、制御下にある要素でこの状況を検出すると、スクロールバーを強制します。これは、javascriptを使用してシミュレートすることもできます。また、この問題に遭遇し、小さなライブラリを作成しました。

https://github.com/ocbnet/layout

OPが求めていたものを実装するデモもあります。

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

于 2012-07-25T03:43:28.490 に答える
0

あなたはこれを行うことができます：

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

それはすべて純粋なHTMLとCSSです。構造体でテーブルを使用したくない場合は、テーブルを使用するというジョセフの答えに代わるものです。

于 2011-07-25T18:39:28.670 に答える
0
  1. はい（高さ100％の部分の場合）：html,body,div {height:100%}
  2. オーバーフロー：隠しは私にはいいようです。その他の可能な解決策：
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] />（ただし、document.writeは避ける必要があります）
    2. <img src="" width="1" height="1" />（つまり、小さなデフォルトサイズを定義する->スクロールバーなし）
    3. @Gerbenの提案：css max-width（最高）
  3. 水平スクロールバーが占めるスペースのようです。この問題は、特定のサイズと比率でのみ発生します。
  4. これは、pictureRatioがfullDivRatioと等しいかかなり近い場合です。オーバーフロー：非表示のフーが見つかりません。
  5. わからない、十分に良いIMOのようだ。

つまり、サイズ変更時の奇妙なスクロールバーは境界線効果のために発生します。スクロールバーは、ifから、elseまたはその逆に切り替えると表示されます。

このjsFiddleを使用すると、水平スクロールバーを取得することはありませんが、垂直スクロールバーを取得することがあります。

于 2011-07-25T16:50:52.567 に答える
0

ええと...それはトリッキーです。これを行う方法を見つけた最善の方法は、実際にコンテンツを単一のセルテーブルに配置し、vertical-およびhorizo​​ntal-alignプロパティを....中央および中央に設定することです。しかし、とにかく、それは行うことができます。それをいじって、一緒に例を得ることができるかどうかを確認します。

編集：

さて、私が最初にアドバイスすることは、ブラウザに比例してサイズを変更させることです。divのサイズを変更する必要はなく、画像だけです。ブラウザに垂直方向の配置を認識させることもできます。これは、計算するよりもはるかに優れたオプションです。これは、コンテンツを単一のセルテーブルに配置することで実行できます。以下のサンプルコードは、純粋なhtmlとcssです。画像の高さと幅を、画像の高さとウィンドウの高さに基づいて、100％自動と自動100％の間で切り替える必要があるという効果に何かを追加できます。うまくいけば、これはあなたをあなたの目標に少し近づけるでしょう。

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>
于 2011-07-25T15:23:45.037 に答える