如何将图像设置在另一个图像之上？

Question

图像应该对所有设备都有响应。我用了

    <img src="images/enter/red20.png" class=" img-responsive" 
        style="max-width:15%;position: absolute; right: 30%;"/>
    <img src="images/enter/computer.png" class=" img-responsive" />

在第一个顶部图像上，但是当更改大小或浏览器顶部图像移动到其他位置时。请参阅上面链接中的设计。

Answer 1

关键是将百分比与 max-width 结合使用。

大图像，你给它一个 max-width: 100%，因此它永远不会因为它自己的大小而变大，但它也不会像它的父级那样变大。

将该图像包装在父 div 中。这个 div 变成了一个 display: inline-block，所以我会和它的内容一样宽。你把这个 div 放在相对位置。

然后我们在 div 中添加小图像并将其放置为绝对。然后它的位置将相对于父级（div）而不是身体。给它一个 25% 的最大宽度（例如），并给它一个以 % 为单位的顶部和左侧/右侧位置。

HTML：

<div class="wrapper">
  <img class="big-img" src="big.png" />
  <img class="small-img" src="big.png" />
</div>

CSS：

.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}

演示

使结果窗口变小，您将看到图像调整大小。