Как сделать 2 изображения отзывчивыми одновременно

Question

У меня есть HTML и CSS код для отображения 2 изображений. Я использую bootstrap, чтобы сделать их отзывчивыми, но реагирует только фон. Может кто-нибудь сказать мне, почему и как это исправить, пожалуйста?

html код:

<img id="introducaoBackground" class="img-fluid" src="Imagens/introducaoBackground.png" alt="Background da introdução"></img>
<img id="logo" class="img-fluid" src="Imagens/logo.png" alt="Logo"></img>

---

#introducaoBackground {
position: absolute;
top: 0px;
left: 0px;
}

---

#logo {
position: absolute;
top: 73px;
left: 280px;
}

Answer 1

Разве это не будет абсолютным логотипом внутри относительного контейнера?

<img id="introducaoBackground" class="img-fluid" src="Imagens/introducaoBackground.png" alt="Background da introdução"></img>

<div id="relativeDiv">
  <img id="logo" class="img-fluid" src="Imagens/logo.png alt="Logo"></img>
</div>

Я повторно использовал фоновые атрибуты для идентификатораlativeDiv, но, конечно, вы можете создавать различные атрибуты помимо относительного положения.

#introducaoBackground {
position: relative;
top: 0px;
left: 0px;
}

#logo {
position: absolute;
top: 73px;
left: 280px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

#relativeDiv {
position: relative;
top: 0px;
left: 0px;
}

Другой пример: https://codepen.io/staypuftman/pen/tFhkz