Question

使用css和/或javascript / jQuery可以使视口行为与此类似：

enter image description here

目前，我正在使用下面的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;
}

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

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

谢谢大家。

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

});

Answer 2

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

视口总是集中在更大的背景图像上

2 个答案: