html - 在 Bootstrap 中将图像置于另一个图像的中心

Question

我已经添加了一个类为“img-circle”的图像。我需要将另一个小图像放在该图像的中心，该图像是所有设备的中心。

谁能告诉我如何解决这个问题。

Answer 1

演示: http://jsbin.com/IyAkoYA/2

<!-- begin image within image :: background size cover does not work in IE make sure you don't exceed the width of the actual image -->

 <div class="circle-wrapper">
  <span class="force-ratio"></span>
  <div class="img-container align-center">
   <div class="center-block-valign"></div>
   <img class="img-circle" src="http://placehold.it/250x250/000000&text=image+2" alt="">
   </div><!--img-container align-center-->
  </div><!--circle-wrapper--> 

 <!-- end image within image -->


.circle-wrapper * {
 box-sizing:content-box;
 -moz-box-sizing:content-box;
 -webkit-box-sizing: content-box 
}

.circle-wrapper {
 position: relative;
 width: 100%;
 box-sizing:content-box;
 -moz-box-sizing:content-box;
-webkit-box-sizing: content-box 
 background-image:url(http://placehold.it/400x400/ff6600/FFFFFF&text=image+1);
 background-position:50% 50%;
 background-size:cover;
 background-repeat:none;
 border-radius:50%;
 max-width:400px;
 max-height:400px;
}

 .force-ratio {
 padding-top: 100%;
 display:block;
 }

.img-container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

.align-center {
 text-align:center;
 font: 0/0 a;
}

.center-block-valign {
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}

.circle-wrapper .img-circle {
 vertical-align: middle;
 display: inline-block;
 max-width:50%;
 padding:25%;
}

其中大部分是通过谷歌搜索“在另一张图片中居中响应图片”找到的 http://jsbin.com/aXiReCub/1/edit .然后，由于 BS3 使用全局边界框大小调整，因此需要进行调整。