javascript - 视口(viewport)始终集中在更大的背景图像上

Question

可以使用 css 和/或 javascript/jQuery 使视口(viewport)表现得像这样:

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

#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;
}

如果您可以在 body 层面设置背景，那么就不需要#background 元素。

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

无论图片大小如何，它都会居中。但是，您必须始终提供比您支持的最大分辨率更大的图像，以获得您所代表的“过扫描”样式。

但是，如果您想拉伸(stretch)背景图像，您可以执行以下操作。它确实需要使用 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);
        }
    });

});