不同分辨率的不同背景图像集

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

为了避免加载错误的图像，我会从一开始就用 Javascript 添加这些图像标签。然后，您只需将它们添加到您在第一个 Javascript sn-p 中确定的相应路径。

我要说的一件事是您不应该尝试完全匹配宽度。以与屏幕高度相同的方式匹配。我之所以这么说是因为访问者的窗口可能没有最大化，并且分辨率可能不是您所期望的（例如，我今年的网站统计显示混合了 100 多种完全不同的屏幕分辨率）。

此外，您可能不应该使用 .width 属性，而是使用availWidth。这将防止用户没有最大化他们的浏览器窗口和他们可能打开一个侧边栏（书签等）会占用显示区域的问题。

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

Answer 2

使用 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 3

去找一个 jQuery 插件。超大号是我的最爱之一。

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