1

Cycle 2 プラグインを使用しています。高さが反応する中央のスライドショーを作成しようとしています。

http://jsfiddle.net/Tancrede/gnH9H/4/

.slideshow {
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 1000;
    overflow: hidden;
}

.slideshow img {
    width: auto;
    height: 100%;
    text-align: center;
    opacity: 0;
    filter:alpha(opacity=0);
}

このスライドショーがうまくスムーズに動作することを願っています。主なポイントは、画像のサイズが異なることですが、それらはすべてビューポートの 100% であり、中央に配置する必要があります (ビューポートが小さすぎる場合はトリミングすることもできます)。

うまくいくように見えるこの命題を見てきました（この解決策を私の問題に適応させる方法がわかりません）：

アスペクト比を維持したレスポンシブ背景

しかし、私は高さだけに興味があり、本当のフルスクリーンを探しているわけではありません.

私の推測では、解決策は JavaScript を使用することですが、どこから始めればよいかわかりません…</p>

4

1 に答える 1

0

あなたがこれを尋ねてからしばらく時間が経ちましたが、私は同様の状況に遭遇していて、私の解決策を追加したいと考えていました. Fiddle を少し編集して、意図したとおりに機能するようにしました。余分な JavaScript は必要ありません (少なくとも私のテスト環境では)。

http://jsfiddle.net/tvgemert/gnH9H/8/

html,body height を 100% に設定するとうまくいきます:

body,html {
    margin: 0px;
    background-color: red;
    height: 100%;
}
于 2014-02-18T15:58:26.563 に答える