是否有背景大小的一种替代方案：覆盖？ [英] Is there an alternative to background-size:cover?

问题描述

在具体使用Chrome，它会创建一个显著滚动滞后，也影响了网页上的动画，使他们口吃实在太差了。

When using Chrome in particular, it creates a significant scrolling lag and also affects animations on the page and makes them stutter really badly.

那么，有没有背景大小的一种替代方案：覆盖？我已经尝试了两件事情，包括插件jQuery的直道，但它实际上创造同样多滞后的背景大小：盖

So is there an alternative to background-size:cover? I have tried a couple things including the plugin jQuery backstretch but it actually created just as much lag as background-size:cover.

推荐答案

我搜索这个永远，我终于想通了这一点。这只是移动的解决方案，但是。 （对不起，恢复旧的文章）：
结果

I searched for this forever, and I finally figured this out. It's only a solution for mobile, however. (Sorry for reviving an old post):

/* 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％和汽车）有两部分吧。第一部分包括 @media屏幕（方向：横向或波泰特）。这将显示根据不同的屏幕方向不同的图像。第二部分是更有趣： 100％ 宽度或长度填充基于宽度或长度的图像，并自动只是确保图像被正确地缩放。所以，如果你的形象是长于它的宽度，在纵向模式下，将填补在较长一侧，因此具有覆盖效果（反之亦然）。

(This is written for images that are wider than they are long. To switch it, flip the 100% and the auto.)There are two parts to it. The first part involves @media screen and (orientation:landscapeorportait). This displays different images based on different screen orientations. The second part is more interesting: 100% width or length fills the image based on width or length, and auto just makes sure the image is properly scaled. So, if your image is longer than it is wide, on portrait mode it will fill up on the longer side, thus having the cover effect (and vice versa).

这篇关于是否有背景大小的一种替代方案：覆盖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！