javascript - CSS - 将整个图像显示为背景而不裁剪

Question

我正在尝试设置一个带有背景图像的 div，上面有一些文本。背景图像需要拉伸(stretch)视口(viewport)的整个宽度，我已经成功地做到了这一点。这是我的 CSS:

.intro-header {
  padding-top: 50px; 
  padding-bottom: 50px;
  color: #fff;
  background: url(http://) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我遇到的问题是它没有显示图像的完整高度。图像在顶部和底部被裁剪。我希望图片显示全高，用户需要向下滚动才能看到图片下方的更多内容。

有没有一种方法可以在不切断顶部和底部的情况下显示完整图像？

谢谢!

Answer 1

删除固定的，而不是 cover 使用 contain。如果你想要一个特定的尺寸，我会在我的 css 中定义一个高度。