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/

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

1 个答案: