时间戳

首页 > 解决方案 > 使定位在图像上的 Div 具有响应性？

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

问题描述

我有一个带有标题的 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;
}

标签： csshtmlresponsive-design

解决方案

为了获得更好的响应体验，您可以根据不同的分辨率轻松更改 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;
}

推荐阅读