CSS-在不裁剪的情况下将整个图像显示为背景 [英] CSS - Show Entire Image as Background Without Cropping

问题描述

我正在尝试使用背景图像设置div，并在其顶部添加一些文本.背景图像需要拉伸视口的整个宽度，而我已经能够成功做到这一点.这是我的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:

.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?

谢谢！

推荐答案

删除固定内容，并使用contain代替cover.如果您想要一个特定的尺寸，尽管我会在CSS中定义一个高度.

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-在不裁剪的情况下将整个图像显示为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！