jQuery缩小背景图片但保持高度

我想缩小背景图片，但使用较小的屏幕分辨率缩放后的最终图片未填充容器。有没有办法缩小图像，但仍然保持包装的高度。jQuery缩小背景图片但保持高度

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

通知动画后的背景图像下的白色空间已经完成？

来源

2016-07-14 Courtney Ball

您可以使用伪元素和关键帧动画的组合，我不认为这里需要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/

来源

2016-07-14 20:16:26 edmundo

哇，我不知道有多么强大的CSS动画真的在那里，我只是知道转换等..谢谢！ –

@CourtneyBall是的，你可以用CSS动画做很多奇特的事情。如果您想了解更多信息或查看一些示例，我建议浏览[Codepen's]（http://codepen.io/search/pens?q=css+animation）网站。 – edmundo

jQuery缩小背景图片但保持高度

回答

相关问题