css - 使位于图像上的 Div 具有响应性？

Question

我有一个带有标题的 div 和一个包含用作背景的 img 的容器内的一些文本，其中 div 位于图像的中间/左侧。我能够让所有内容都显示在完整的显示屏上，但似乎无法使其响应。现在 img 可以很好地缩放，但带有文本的 div 不会:文本框保留但文本溢出。该页面在其他方面是响应式的，我已经尽我所能地尝试了一切。

尝试过改变位置、溢出、宽高等

HTML:

  <div class="welcome">
    <img src="pictures/hello.jpg" class="welcome-image">
    <div class="information">
        <h1>Welcome Message</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
           eiusmod tempor incididunt ut labore et dolore magna aliqua. 
           Eleifend quam adipiscing vitae proin sagittis. Magna fermentum 
           iaculis eu non diam id volus. </p>
    </div>
</div>

CSS:

.welcome{
   position: relative;
 }

.welcome-image{
   width: 100%;
   height: auto;
   position: relative;
}

.information{ 
   position: absolute;
   top: 35%;
   left: 20%;
   color: black;
   background-color: white;
   width: 50%;
   height: 55%;
   padding: 5% 5%;
   text-align: center;
}

.information h1{
   font-size: 50px;
   margin-top: 0;
}

.information p{
  text-align: justify;
  font-size: 18px;
}

Answer 1

您申请以下属性(property):

 max-width: 100%;