动画背景拟合屏幕

Question

我在启动屏幕上有一个背景图像，从100％慢慢放大到200％（除了让页面有点生命外，没有其他原因）。它在水平屏幕上可以很好地工作，但是当屏幕很窄时（对于移动设备而言），由于图像不再填充背景，顶部和底部都有白色空间。如果我将背景大小更改为“覆盖”，则动画无法正常工作（它将从0％变大而不是填充屏幕）。

所以我的问题是 - 我如何设置初始大小来覆盖所以它总是填满屏幕，然后慢慢放大到200％？

$('.background').animate({ 
 
    backgroundSize: "200%" 
 
\t }, 40000);

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.background { 
 
\t width: 100%; 
 
\t height: 100vh; 
 
\t background-image:url(Front-Cover.jpg); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
} 
 
\t 
 
.header { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 
\t 
 
.header img { 
 
\t width: 100%; 
 
\t height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <img src="header.png" alt=""> 
 
</div> 
 

 
<div class="background"></div>

Answer 1

我不能让你的代码段工作。给这个CSS一枪，不需要jquery。

.background { 
     width:100%; 
     height:100%; 
     background-image:url(Front-Cover.jpg); 
     background-position: center; 
     background-size: cover; 
     animation: 5s ease example infinite; 
} 

@keyframes example { 
    0% { transform: scale(1);} 
    50% { transform: scale(2);} 
    0% { transform: scale(1);} 
} 

@keyframes example { 
    0% { -webkit-transition: scale(1);} 
    50% { -webkit-transition: scale(2);} 
    0% { -webkit-transition: scale(1);} 
} 
    @keyframes example { 
    0% { -moz-transition: scale(1);} 
    50% { -moz-transition: scale(2);} 
    0% { -moz-transition: scale(1);} 
}