Question

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

methods mentioned here中的任何一个与我测试过的都不兼容（Galaxy Nexus＆amp; 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;
}

Answer 1

几个月前我写了一个符合你需求的方法：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);

固定的背景图像和覆盖在手机/平板电脑上

1 个答案: