CSS - 缩放到背景图像

Question

我在缩放到背景图片方面遇到了一些问题。

问题是：

• 缩放发生时会出现水平和垂直滚动条。我删除了childDiv，认为可能是它，但没有运气。 还尝试设置最大高度和最大宽度然而没有帮助。

它几乎就像图像的宽度和高度一样，而不是放大。

我的代码如下：

/* Chrome, Safari, Opera */

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}
/* Standard syntax */

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.2, 1.2);
  }
}
.homeDivParent {
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(100, 100, 100, 0.1)), url("/assets/images/bgHome.jpg");
  background-position: 20% 0%;
  background-color: #fafafa;
  -webkit-animation: zoom 10s;
  animation: zoom 10s;
}
.homeDivChild {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="homeDivParent">
  <div class="homeDivChild">
    Some Text
  </div>
</div>

Answer 1

我不知道我是否正确解读它，但我认为你想删除滚动条，对吗？

.homeDivParent {
    overflow: hidden;
}