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

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:

我正在尝试设置一个带有背景图像的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;
}

The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.

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

Is there a way I can show the full image without cutting the top and bottom off?

有没有办法可以显示完整的图像而不切断顶部和底部?

Thanks!

4 个解决方案

#1

Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.

删除固定而不是封面使用包含。如果你想要一个特定的大小,我会在我的CSS中定义一个高度。

#2

You can use background-size: auto 100%;

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

I updated an example in fiddle to see how its looks.

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

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

#3

Remove the fixed from the background.

从背景中删除固定。

url() no-repeat center center

#4

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

setting the width and height of background-size to 100% will fill the div

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

#1