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가 필요하지 않다고 생각합니다. 내가 MDN에 Using CSS animations을 읽어 보시기 바랍니다

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

, 당신은 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 배경 이미지가 축소 되어도 높이 유지

답변

관련 문제