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縮小背景圖片但保持高度

回答

相關問題