1

29 枚の画像を含む全画面背景画像スライドショーを使用しています。画像は (1366 x 769) ピクセルの解像度で完全に表示されますが、これより低い別の解像度を使用すると、画像のほとんどの部分が表示されません。また、解像度が大きすぎると背景色(白)が右下に出てしまいます。

javascriptで画面の解像度を確認するために私が見つけた方法は-

<script type="text/javascript">
if ((screen.width=1400) && (screen.height<=900)) {

}
if ((screen.width=1366) && (screen.height<=768)) {

}
else {

}
</script>

さて、上記のコードで以下の画像をどのように使用すればよいでしょうか? 

<img src="1400/images/background/bg-2.jpg"> 
<img src="1400/images/background/bg-3.jpg"/>
...
<img src="1400/images/background/bg-29.jpg"/>

と

<img src="1366/images/background/bg-2.jpg"> 
<img src="1366/images/background/bg-3.jpg"/>
...
<img src="1366/images/background/bg-29.jpg"/>

画像はhtmlコードで表示されるため、これにCSSを使用できません。

4

3 に答える 3

1

間違った画像を読み込まないようにするために、最初からJavascriptを使用してそれらの画像タグを追加します。次に、最初のJavascriptスニペットで決定した対応するパスを使用してそれらを追加します。

私が言いたいのは、幅を正確に一致させようとすべきではないということです。画面の高さについても同じように一致させます。私がこれを言う理由は、訪問者がウィンドウを最大化していない可能性があり、解像度が期待したものではない可能性があるためです（例として、今年の私のWeb統計は100を超える完全に異なる画面解像度の組み合わせを示しています）。

また、おそらく.widthプロパティではなく、availWidthを使用する必要があります。これにより、ユーザーがブラウザウィンドウを最大化していない問題と、表示領域に食い込むサイドバー（ブックマークなど）が開いている可能性がある問題を防ぐことができます。

画像がすでにページ上にあり、それを変更できない場合は、Javascriptを使用してSRCプロパティを変更できます。これは、最大で2セットの画像がロードされたことを意味します。その例の周りにこれ以上HTMLを提供していないので、それらを具体的に選択するためのコードがどうなるかはわかりません。それらはすべて、特定のIDを持つdiv内に存在しますか、それとも、例に含めていないクラス属性を共有しますか？

于 2013-01-15T12:53:16.757 に答える
1

CSS で背景を設定し、Media-Queries を試す

http://wiki.selfhtml.org/wiki/CSS/Media_Queries

何かのようなもの：

@media (width: 800px) {
    body {
        background-image: url('image1.jpg');
    }
}

@media (width: 1200px) {
    body {
        background-image: url('image2.jpg');
    }
}

または別のファイルでそれを行う

最小幅と最大幅の css メディア クエリ

または、独自のスクリプトを最後まで記述します。jQuery を使用し、必要に応じて css ファイルを追加することもできます。

<script type="text/javascript">
    jQuery(document).ready(function() {
        var $background = jQuery('<img class="background" src="fallback.jpg" alt="" />');

        if (jQuery(window).width() == 1400 && jQuery(window).height() <= 900) {
            // jQuery('head').prepend('<link href="styles1.css" ... />');
            // or
            $background.attr('src', 'image2.jpg');
        }

        [...]

        $background.appendTo('body');
    });    
</script>

<style type="text/css">
    img.background {
        /* style your background e.g. */
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 0 none;
    }
</style>
于 2013-01-15T12:34:43.163 に答える
0

jQueryプラグインを探してください。Supersized は私のお気に入りの 1 つです。

http://buildinternet.com/project/supersized/

于 2013-01-15T13:04:33.693 に答える