html - 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;
}