当您有两个图像(一个在另一个之上)时如何使图像响应

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

1） 小心缩进。

2）你有一个div（imgbg），有一个背景图像和一个img标签中的图像。

3）"ico_presentation.png"不要改变大小，因为你一开始没有给它一个尺寸。如果你的图像是（比如说）500x500像素，它将在你的网页上显示。我认为您希望图像根据窗口大小调整大小，因此必须使用相对单位（%，vw，vh，...）在css中为其提供尺寸

Answer 2

您可以使用 img class="img-fluid" 而不是 img-response。我把我的元素放在容器流体和容器中。使用 Bootstrap 框架。id imgbg 的div 为空。带有 id imgpos 的div 还分配了 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>