Is there an alternative to background-size:cover?

后端 未结 2 2030
不思量自难忘°
不思量自难忘° 2021-02-06 19:08

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 alter

相关标签:
2条回答
  • 2021-02-06 19:13

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

    0 讨论(0)
  • 2021-02-06 19:15

    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 !

    0 讨论(0)
提交回复
热议问题