Как сделать изображение отзывчивым, когда у вас есть два изображения (одно поверх другого)

Question

При начальной загрузке я пытаюсь получить изображение поверх другого изображения

html:

<section id="test">
  <div class="row">
          <div class="imgbg"><img src="img/bg_pres.png" class="img-responsive"></div>
          <div class="imgpos"><img src="img/ico_presentation.png" class="img-responsive"></div>
</div>
</section>

css:

.imgbg
        {
  margin-top: 5%;
  position:absolute;
  background-repeat :repeat-x;
  width:98%;
  height:auto;
  background-image: url('img/bg_pres.png');
  z-index : 3;
      }


.imgpos
{
position:relative;
  z-index: 5;

}

Когда я изменяю размер окна,картинки "ico_presentation.png" не меняются и сохраняют свой первоначальный размер.

Может кто-нибудь объяснить мне, что мне нужно изменить?

Большое спасибо

Answer 1

Вы можете использовать img class = "img-liquid" вместо img-отзывчивого.Я положил свои элементы в контейнер с жидкостью и контейнером.Использование фреймворка Bootstrap. Div с id imgbg пуст.И div с id imgpos также имеет назначенную img-Fluid, чтобы он изменял размер при изменении размера окна.Меня устраивает!Если это помогло, пометьте мой ответ как правильный.

.imgbg
    {
 background: url("img/tile.png");
 background-repeat: repeat-x;
 position:absolute;
 width:2000px;// size of the div width
 height:1000px;// size of the div height
 z-index: 3;
 }


 .imgpos
 {
 position:relative;
 z-index: 5;

 }




 <div class="container-fluid">
 <div class="container">
 <section>
      <div class="row">
        <div class="imgbg"></div>
      <div><img class="img-fluid imgpos" src="img/cinema.jpeg"></div>
 </div>
 </section>

 </div>
 </div>

Answer 2

1) Будьте осторожны с отступами.

2) У вас есть div (imgbg) с фоновым изображением И изображение в теге img.

3) "ico_presentation.pngmsgstr "не меняйте размер, потому что вы не указали размер в первую очередь.Если ваше изображение (скажем, 500x500px), оно будет отображаться на вашей веб-странице.Я думаю, что вы хотите, чтобы ваше изображение было изменено в соответствии с размером окна, поэтому необходимо указать размеры в CSS, используя относительные единицы (%, vw, vh, ...)