0

ヘッダーのすぐ下にスライドショーがある Web サイトで作業しています。スライドショーの高さをレスポンシブに制限して、1 つの画面解像度でビューポートの 20 ～ 30% を残すと、他の画面解像度でも同じことが行われるようにします。現在、私のCSSは次のようになっています。

#slideshow-container {
    height: 70vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#slideshow-container img {
    height: auto;
    width: 100%;
}

画像はレスポンシブにスケーリングされ、ビューポート ユニットを使用して目的を達成しています。ただし、ビューポート ユニットはブラウザー間の互換性があまり高くないため、すべてのブラウザーで同じアイデアを実現する方法を探しています。JavaScript や jQuery ではなく、CSS のみを使用することをお勧めします。

4

1 に答える 1

0

私はあなたのマークアップを知らないので、助けるのはもっと難しい. 次のCSS行でそれを行います：

/*reset stuff so that body fits the entire viewport*/
html,
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#slideshow-container {
     height:70%;
     ...
}

これでうまくいくはずです。

しかし、私の意見では、ビューポート ユニットは現在のほとんどのブラウザーでサポートされているため、おそらく使用しない理由はありません 。

于 2014-07-09T20:42:38.270 に答える