html - 如何使 div 的高度和背景图像拉伸(stretch)以环绕 div 中的所有内容？

Question

我前段时间在做网站的时候，没有设置div部分的高度，而是用内容填充了它。然后我将 background-image 设置为图像，由于没有高度，image/div 会拉伸(stretch)以包裹内容。我一直在尝试复制它，但每次我做同样的事情时，背景图像都会消失，但内容仍然存在(白色文本，除非选中，否则看不到)。当我将其设置为:

#main{
    background-image: url("images/pizza-dark.jpg");
    background-repeat: no-repeat; 
    background-size: cover;
    background-attachment: fixed;
    clear: both;
}

我知道有办法做到这一点，但我不太确定。这对站点至关重要，因为我使用的是 Bootstrap 列，并且设置的高度不会在移动设备上产生良好的结果。在下面的 JSFiddle 中，没有设置高度，如您所见，背景图像根本不显示。即使您将其设置为 100%，向下折叠的内容(来自 Bootstrap 的列)也不会显示，因为背景图像不会拉伸(stretch)那么远。我也尝试过 height:auto，但这也不起作用。

这是一个 JS fiddle : https://jsfiddle.net/du53n862/

谢谢!

Answer 1

您忘记将 float 属性添加到主容器。您可以使用 vh 单位作为主容器 height 的单位，它将适合所有屏幕尺寸:

#main {
background-image: url("http://itspizzatime.ca/wp-    content/uploads/2015/09/4791207-9790062099-Pizza1.jpg");
background-repeat: no-repeat; 
background-size: cover;
float: left;
width: 100%;
height: 100vh;
}

这是一个 fiddle :fiddle link