1

我正在使用包含 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 代码显示的。

4

3 回答 3

1

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

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

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

如果图像已经在页面上并且您无法更改，您可以使用 Javascript 更改它们的 SRC 属性。这意味着最多加载两组图像。由于您没有围绕该示例提供更多 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 插件。超大号是我的最爱之一。

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

于 2013-01-15T13:04:33.693 回答