html - 如何让两张图片同时响应

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

这不是相对容器内的绝对 Logo 吗？

<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>

我已经为 relativeDiv id 重新使用了背景属性，但当然你可以在相对位置之外创建不同的属性。

#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