Question

我正在设置一个带有背景图片的div，其上面有一些文字。背景图像需要拉伸视口的整个宽度，这是我能够成功完成的。这是我的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中定义一个高度。

Answer 2

您可以使用background-size: auto 100%;

我在小提琴中更新了一个例子，看看它的外观。

http://jsfiddle.net/4ozmn00t/2/

Answer 3

从背景中删除修复。

url() no-repeat center center

Answer 4

.intro-header {
    padding-top: 50px; 
    padding-bottom: 50px;
    color: #fff;
    background: url(http://);
    background-size: 100% 100%;
}

将background-size的宽度和高度设置为100％将填充div

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

4 个答案: