Is there an alternative to background-size:cover?

佐手、 提交于 2019-12-04 14:40:02

问题


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

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.


回答1:


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

(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).




回答2:


Try it ,

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

or you can try with 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"});
                                 }

Or you can go to this link as falguni said . Here is documentation !



来源:https://stackoverflow.com/questions/17501126/is-there-an-alternative-to-background-sizecover

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!