0

100% の幅を強制するバナー スライダーがあります。問題は、ロード時に最初のスライドが表示されないことです (少なくとも chrome では)。2 番目のスライドが「スライド」するのを待つ必要があります。固定の高さを設定すると問題なく動作しますが、私の解像度は 1900 で、高さが固定されている画面では解像度が異なると見栄えが悪くなります。

訪問者の解像度とバナーのサイズを計算して、ロード時の幅 100% に基づいて適切な高さを計算する方法があるかどうか疑問に思っていました。

ベータ版の URL はhttp://www.can-do.org/beta/です (繰り返しますが、IE では問題なく動作すると思います。Chrome/firefox でしか表示されません)。

4

3 に答える 3

1

CSS コードを使用してバナー サイズを変更します。

@media only screen and (max-width: 480px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_baner_image_id {width:000px;height:000px;}
}
于 2013-05-07T03:00:19.043 に答える
0

CSSだけでこれを行うことは可能かもしれません。@media ルールの問題は、ピクセル幅ごとに 1 つ必要になることであり、これは実行できません。したがって、代わりにこれを試すことができます：

まず、ここでラッパー div を変更します。

<div align="center">

これに

<div class="pluswrap">

次に、これらのスタイルを CSS ファイルに追加します。

.pluswrap {
text-align: center;
padding-bottom: 30%;
height: 0;
position: relative;
}

スライドショーの高さは常に幅の 30% であるため、30% の下部パディングが設定され、任意の画面サイズでコンテナー div がその寸法に開かれたままになります。

（これをリモートで適切にテキスト化することはできませんが、試してみる価値はあります。機能しているように見えますが、一時的なスタイルが消去されるため、ページを更新してページの読み込み時に何が起こるかを確認できません。ただし、それが機能したかどうかはわかります。）

于 2013-05-07T05:18:29.633 に答える