jQuery zoom aus dem Hintergrundbild, aber Höhe beibehalten

Question

Ich versuche, aus einem Hintergrundbild zu verkleinern, jedoch mit einer kleineren Bildschirmauflösung füllt das endgültige Bild nach dem Zoom nicht den Container. Gibt es eine Möglichkeit, das Bild zu verkleinern, aber die Höhe des Wrappers beizubehalten?

$('#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

Hinweis der weiße Raum unter dem Hintergrundbild, nachdem die Animation beendet ist?

Answer 1

Sie können eine Kombination aus Pseudo-Elementen und Keyframe-Animationen verwenden, ich glaube nicht, dass jQuery hier notwendig ist.

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

I Using CSS animations auf MDN empfehlen gelesen haben, werden Sie viele coole Informationen zu finden, wie man mit CSS animieren.

Sie können auch die Demo auf JSFiddle sehen: https://jsfiddle.net/r52rwvmk/6/