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

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: 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%;
}

DEMO

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