如何防止带有背景图像的<div>在屏幕大小调整时折叠？

Question

我正在设计一个Wordpress模板（网站），但我遇到了一些麻烦。

基本上在每个页面上都有一个横向顶部的水平导航（不固定在顶部），右下方是一个100％宽度（通常约为20％vh高）的图片，上面有一些文字。为了将文本置于其上并使其可更改，我将图片容器设置为a，然后将图像添加为带有CSS的“背景图像”。

但是，当我将页面缩小（测试响应性）时，图片下方的所有内容都会崩溃。看附图片了解我的意思。

如何设置它以使窗口缩小时大图下方的内容不会崩溃？我试过'min-height'，但似乎没有用。

HTML：

<div id="introParagraph" class="m-b-2 p-y-2">  <!--- THE CONTAINER DIV -->
 <h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our approach</h1>               
 <h3 class="text-xs-left col-md-3 col-md-offset-1 col-xs-6 m-t-1" id="question">How we help you figure out what works for you and your business. <br><br> Click on the icons to learn more. </h3>                   
</div>

CSS：

@media (min-width: 650px){  /* I set it under media-query because the picture is grey on a mobile device-- the picture only shows on bigger screens */

#introParagraph{
  background:  url("../img/approach.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 45%;
}

以下是您可以看到我的“崩溃”问题的图片，以及我希望它在调整大小时的外观：

Answer 1

您是否尝试以像素为单位设置高度？

Answer 2

我认为你必须将图片高度增加到更大，例如增加到100％，或者将标题字体大小增加到更小的页面。当文本在background-image之外时，使用另一个媒体jquery。并使用clear：对于带有背景图像的块下的内容div。

Answer 3

问题在于，由于高度设置，您的{{1}}无法增长/调整内容的大小。换句话说，您的容器不包含＆＃39; /有溢出。这是由于内容高于屏幕高度的45％引起的。从CSS语句中删除高度时，允许容器增长/调整为内容的高度。

这里有一个固定的小提琴：https://jsfiddle.net/f7ya2n9q/1/