有没有替代背景大小：封面？答案

【问题标题】：Is there an alternative to background-size:cover?有没有替代背景大小：封面？
【发布时间】：2013-07-04 06:42:30
【问题描述】：

特别是在使用 Chrome 时，它会产生明显的滚动延迟，还会影响页面上的动画，使它们非常糟糕。

那么有没有替代背景尺寸：封面？我尝试了一些东西，包括插件 jQuery backstretch，但它实际上创建的延迟与 background-size:cover 一样多。

【问题讨论】：

谢谢，我会检查一下...不过它说“已弃用”。但是它链接到另一个...
似乎不是替代品，只是IE用户的补偿器。
louisremi.github.io/jquery.backgroundSize.js/demo
如何制作多种尺寸的背景图片，然后根据窗口大小（使用媒体查询）选择其中一张，这样浏览器就不必拉伸了。

【解决方案1】：

我一直在寻找这个，我终于弄明白了。但是，这只是移动设备的解决方案。（抱歉恢复旧帖子）：

/* portrait */
@media screen and (orientation:portrait) {
    .box{
    /* portrait-specific styles */
    background-size: auto 100%;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
   .box{
    /* landscape-specific styles */
    background-size: 100% auto;
    }
}

（这是为宽于长的图像编写的。要切换它，请翻转100% 和auto。）它有两个部分。第一部分涉及@media screen and (orientation:landscape或portait)。这会根据不同的屏幕方向显示不同的图像。第二部分更有趣：100% width 或 length 根据宽度或长度填充图像，而 auto 只是确保图像正确缩放。因此，如果您的图像长于宽度，则在纵向模式下，它会在较长的一侧填满，从而产生封面效果（反之亦然）。

【讨论】：

【解决方案2】：

试试看，

   background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;

或者你可以尝试使用javascript，

function actualizar_fondo(imagen){
    $('body').css({"background":"url(img/"+imagen+".jpg) no-repeat center center fixed"});
    $('body').css({"-webkit-background-size":"cover"});
    $('body').css({"-moz-background-size":"cover"});
    $('body').css({"-o-background-size":"cover"});
    $('body').css({"background-size":"cover"});
                                 }

或者你可以去this link falguni 说的。 Here 是文档！

【讨论】：