Bootstrap：如何在另一个图像上设置图像

Question

在我的页面中，我有2个图像，我想在另一个上显示其中一个，这是我的代码，我该如何设置图像：

<div class="profile-image img-responsive">
   <img src="images/pro.png"/>
   <img src="images/2.png" class="img-circle">
</div>

JSFIDDLE

我想将2.png设置在左侧和底部pro.png，如下所示：

我该怎么做？

Answer 1

以下代码将在第一张图像上显示第二张图像。所有图像和图像面板都是响应式的。

1.CSS

.profile-img {
width: 100%;
position: relative;
}

.img-responsive {
max-width:100%;
height:auto;
}

.img-circle {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}

2.HTML

<div class="profile-img">
  <img class="img-responsive" src="images/pro.png" />
  <img class="img-circle img-responsive" src="images/2.png" />
</div>

Answer 2

@ bnuhero的回答非常好，我会稍微改变一下。

首先，基于jsfiddle，将两个图像封装在一个相对div中。这将允许放置在顶部的图像（定义为“绝对”）相对于父div放置，而不是相对于整个窗口放置。

<div class="header-image">
        <div class="profile-image" style="margin: 50px auto;">
            <img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
            <img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
        </div>
        </div>
</div>

接下来，制定规则以定义实际div。并制作一个额外的类或ID来定位要放在顶部的图像。使用相同的“img-circle”类编写规则会干扰Bootstrap设置的默认“img-circle”规则

.header-image {
position:relative;
}

.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}

在http://jsfiddle.net/Bavc_Am/jG9bP/1/

更新了jsfiddle

Answer 3

将您的CSS更新为此

.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}