1

如何获得可缩放到视口的固定背景图像以在智能手机/平板电脑上正常工作？

此处提到的任何方法都不适用于我测试过的方法（Galaxy Nexus 和 TF300t，使用默认浏览器、Firefox 或 Chrome 都存在闪烁/奇怪调整大小或忽略“封面”指令的问题）

我看到的一件事是不要将背景图像放在触摸设备的 HTML 标记上，因为它们似乎滚动了全高视口，而不是在 HTML 标记内滚动。

body {
  background: black url("../img/cover.jpg") no-repeat top center fixed;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
}
4

1 回答 1

0

几个月前我写了一种适合您需求的方法：http: //plugins.jquery.com/fitpic/

HTML

<img src="http://ge.tt/api/1/files/1jN8IzR/0/blob?download" class='bg'>

CSS 并不真正需要

.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1
}

JS

var fitPic = (function() {
    var winW = $(window).width(),
        winH = window.innerHeight || $(window).height(); // `innerHeight` for mobile safari

    $(".bg").each(function() {

        var elem = $(this),
            elemW = elem.width(),
            elemH = elem.height(),

            imgW = (elemW * winH) / elemH,
            imgH = (elemH * winW) / elemW,

            newW = imgH < winH ? imgW : winW,
            newH = imgH < winH ? winH : imgH;

        this.style.width = newW + "px";
        this.style.height = newH + "px";

    });
});

$(window).on('load resize', fitPic);
于 2013-01-28T00:17:24.023 回答