Question

我正在使用带有29张图片的全屏背景图片幻灯片。图像显示完美的（1366 x 769）px分辨率，但当我使用低于此的不同分辨率时，图像的大部分部分未显示。当分辨率太大时，背景颜色（白色）会出现在右侧和底部。

我想通过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"/>

我无法使用CSS，因为图像以html代码显示。

Answer 1

使用CSS设置背景，然后尝试媒体查询

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');
    }
}

或使用不同的文件

Min-width and Max-width css media queries

或编写自己的脚本到最后。也许通过使用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>

Answer 2

为避免加载错误的图像，我会从一开始就使用Javascript添加这些图像标记。然后，您只需使用您在第一个Javascript代码段中确定的相应路径添加它们。

我要说的一件事是你不应该试图准确地匹配宽度。以与屏幕高度相同的方式匹配。我说这个的原因是因为访问者可能没有最大化他们的窗口，并且分辨率可能不是您所期望的（例如，我的年度webstats显示超过100种完全不同的屏幕分辨率）。

此外，您可能不应该使用.width属性而是使用availWidth。这样可以防止用户没有最大化浏览器窗口的问题，以及可能会打开侧边栏（书签等）并进入显示区域的问题。

如果图片已经在页面上而您无法更改，则可以使用Javascript更改其SRC属性。这意味着最多加载了两组图像。由于您没有在该示例周围提供更多HTML，因此我无法说明具体选择这些代码的代码。它们是否都存在于具有特定ID的div中，或者它们是否共享您未在示例中放置的类属性？

Answer 3

转到jQuery插件。超级化是我的最爱之一。

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

不同的背景图像为不同的分辨率设置

3 个答案: