現在、unsliderを使用して、Web ページ ( http://fths.convoke.info )に全幅のスライダー ヘッダーを作成しています。私が設計した寸法 (1920x450) では問題なく動作しますが、解像度が異なると、状況が変になります。見てみましょう：
背景画像は、幅が画面に収まるように比例してスケーリングされますが、実際のli要素の高さは固定されており、サイズは変更されないため、図に示されているギャップが残ります。
スライダー設定自体の HTML は次のとおりです。
<div class="banner" style="overflow: hidden; width: 1904px; height: 450px;">
<ul style="width: 300%; position: relative; left: -200%; height: 450px;">
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-02.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-01.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-03.jpg); background-size: 100%;"></li>
</ul>
</div>
そしてCSS：
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li {
float: left;
height: 450px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
min-heightと のさまざまな組み合わせを試しmax-heightましたが、実際には機能しませんでした。高さには何らかの値が必要です。そうしないと、li要素自体が折りたたまれます。background-size:coverも有望に思えますが、画像はまったくスケーリングされず、非常に狭い解像度では見栄えが悪くなります。
liこれを機能させるには、背景画像と同じ相対的な比率を維持するように高さを設定する方法が必要だと思います。CSS でこれを行う方法はありますか、それとも何かスクリプトを作成する必要がありますか? を使用して高さを「設定」するこの方法を見つけましpadding-top:x%たが、スライドの数によってスライダーの実際の幅が変化するため、これが問題になると思います。