Question

使用Bosstrap3 /。我有2张图片。一个图像很大。另一个很小。

这两个图像都是响应式的。

我想把小图片放在大图片上。

静态页面很容易。但是我想为响应式页面做这件事。

我希望图像的位置不会随着页面的大小调整而改变。

我试试这个：

<div class="container">

<div class=" panel panel-default">
    <div class="panel-body" style="padding:1px">
        <img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
    </div>
    <div class="panel-footer">
        <a href="#" class="pull-right">View all</a> <h4>Bootply Editor &amp; Code Library</h4>
    </div>
</div>
</div>

<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">

AND css code：

.mytumb{
  position:absolute;
  top:50px;
  left:40px;

}

但它适用于静态页面。

我该怎么做？

https://jsfiddle.net/DTcHh/18935/

Answer 1

您可以在image内添加.container div，使其位于此absolute的{{1}}位置relative。

Like this

然后，使用媒体查询来使其适合每次。

container

这不完美，但我想你已经有了这个想法。

Answer 2

你可以到这里寻找解决方案position one image above another，你一定会得到一个解决方案。快乐的编码！

bootstrap3：/两个图像一起响应

2 个答案: