Делать 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

Для лучшего восприятия вы можете легко изменить атрибут 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 3

Вы должны удалить позицию: абсолютная из .информации

Answer 4

Вы применяете свойство:

 max-width: 100%;