jQuery背景画像をズームアウトしても高さを維持する

Question

背景画像をズームアウトしようとしていますが、画面解像度が低いほど、ズーム後の最終画像がコンテナを満たしません。イメージをズームアウトする方法はありますが、ラッパーの高さは維持しています。

$('#banner').css("background-size", "200%"); 
$('#banner').delay(500).animate({ 
    backgroundSize: '100%', 
    height: '500px', 
}, 7500); 


#banner{ 
    background-image: url('../imgs/banner.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    min-height: 500px; 
    border-bottom: 3px solid #D33F44; 
    padding: 150px 0px; 
} 

JSFiddle here

アニメーションが終了した後に、背景画像の下の空白に注意してください？

Answer 1

擬似要素とキーフレームアニメーションの組み合わせを使用できますが、ここではjQueryは必要ないと思います。

.banner { 
 
    position: relative; 
 
    overflow: hidden; /* prevent “spillage” of image */ 
 
    width: 100%; 
 
    min-height: 300px; 
 
    padding: 150px 0; 
 
    color: #fff; 
 
    border-bottom: 3px solid #D33F44; 
 
} 
 

 
/* Image align to the center, behind the banner */ 
 

 
.banner:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: url('http://i.imgur.com/75olaoq.jpg') no-repeat center; 
 
    background-size: cover; 
 
    transform-origin: center; /* scale from the center */ 
 
    transform: scale(2); 
 
    z-index: -1; 
 
    pointer-events: none; 
 
    animation: zoom-out 7.5s both; 
 
} 
 

 
/* Simple keyframe animation to zoom out the image */ 
 

 
@keyframes zoom-out { 
 
    0% { transform: scale(2); } 
 
    100% { transform: scale(1.2); } 
 
}

<div class="banner"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at imperdiet purus. Aenean vitae urna tortor. Vestibulum maximus ut enim vel ultrices.</p> 
 
</div>

私はMDNにUsing CSS animationsを読んでお勧めします、あなたはCSSでアニメーション化する方法についてのクールな情報の多くを見つけるでしょう。

またJSFiddle上でデモを見ることができます：私は、トランジションなど。感謝のちょうど認識していたところ、https://jsfiddle.net/r52rwvmk/6/