1

可以使用 css 和/或 javascript/jQuery 使视口表现得像这样：

在此处输入图像描述

目前，我正在使用下面的 css 使背景覆盖整个视口：

#background {    
  width: 100%; height: 100%;
  top:0; left:0;
  position: absolute;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;    
  overflow: hidden;
}

但这不是我真正需要的。以这种方式使用它，在低屏幕分辨率下，背景图像会扭曲并且看起来非常糟糕。

编辑 为了清楚起见，我不关心移动用户。这不是我最初工作的系统的目的。这将是一个桌面系统。

谢谢大家。

4

2 回答 2

1

尝试这个...

#background {
    background: url('image/myimage.jpg') center center;
}

或者

body {
    background: url('image/myimage.jpg') center center;
}

如果您可以在身体级别设置背景，则不需要#background 元素。

但是使用 CSS 设置图像不会缩放图像，“中心中心”将使图像垂直和水平居中。

无论图像大小如何，这都会使其居中。但是，您必须始终提供大于您支持的最大分辨率的图像才能获得您所代表的“过度扫描”样式。

但是，如果您想拉伸背景图像，您可以执行以下操作。它确实需要使用 javascript 和 jQuery 库。

HTML：

<div id="divBackWrapper">
    <div id="divBackCenter">
        <img src="http://www.abc.net.au/radionational/image/4220698-3x2-700x467.jpg" width="700" height="467" />
    </div>
</div>

CSS：

html, body {
    width: 100%; height: 100%;
    padding:0; margin:0;
}

#divBackWrapper, #divBackCenter {
    position: absolute;
    width: 100%; height: 100%;
    overflow: hidden;
}

#divBackCenter {
    overflow: visible;
    top: 50%;
    left: 50%;
}

#divBackWrapper img {
    position: absolute;
    width: 100%; /* change to auto to allow width set by height, one must always be 100% */
    height: auto; /* change to 100% to allow height stretching */
    min-width: 700px;
    min-height: 467px;
    top: -50%; /* half height */
    left: -50%; /* half width */

}

JS：

jQuery(function() {
    $(window).resize(function() {

        var $window = $(window);
        var $img = $("#divBackCenter img");

        if ( $img.width() <= $window.width() ) {
            $("#divBackCenter").removeAttr("style");
            $("#divBackCenter img").removeAttr("style");
            return;
        } else {
            var css = {};
            css.top = -($img.height() - $window.height()) / 2;
            css.left = -($img.width() - $window.width()) / 2;

            $("#divBackCenter").css({top:0,left:0});
            $("#divBackCenter img").css(css);
        }
    });

});
于 2013-05-04T12:16:42.987 回答
0

我已经使用jquery backstretch几次来轻松完成背景拉伸工作。我知道它也可以满足您的需求。

于 2013-05-04T12:21:03.040 回答