使定位在图像上的 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

Bootstrap 推荐的最佳断点。您可以根据需要设置字体大小。

@media only screen and (min-width : 320px) {
    .information h1 {
        font-size: 15px;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    .information h1 {
        font-size: 25px;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .information h1 {
        font-size: 30px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .information h1 {
        font-size: 50px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .information h1 {
        font-size: 50px;
    }
}

Answer 2

您应该从 .information 中删除 position:absolute

Answer 3

为了获得更好的响应体验，您可以根据不同的分辨率轻松更改 css 属性。

我建议你试试下面的代码；

/* For Mobile */
@media screen and (max-width: 540px) {
    .information h1 {
        font-size: 30px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .information h1 {
        font-size: 40px;
    }
} 

为了获得更好的体验，您可以轻松更改分辨率和不同分辨率的数量。

另外，如果你想停止包装h1，你可以使用下面的代码；

.information h1 {
   white-space: nowrap;
}

Answer 4

您应用以下属性：

 max-width: 100%;