html - 是否有背景大小 :cover? 的替代方案

Question

特别是在使用 Chrome 时，它​​会产生明显的滚动滞后，还会影响页面上的动画并使其严重卡顿。

那么有没有背景大小的替代方案:封面？我尝试了一些东西，包括插件 jQuery backstretch，但它实际上产生了与背景大小:覆盖一样多的滞后。

Answer 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 和(orientation:landscapeorportait)。这会根据不同的屏幕方向显示不同的图像。第二部分更有趣: 100% width 或 length 根据宽度或长度填充图像，而 auto 只是确保图像是正确缩放。因此，如果您的图像长于宽，则在纵向模式下，它将填满较长的一侧，从而产生覆盖效果(反之亦然)。