html - 使用 Bootstrap 4 将图像居中放置在另一个图像之上

Question

我想这样做(我的脸代替白色圆圈)

但是当我尝试时，我的脸会掉到底部。

这是代码

`<div class="container-fluid no-padding">
        <div class="row">
             <div class="col-12">
                <img src="img/ordinateur.jpg" class="img-fluid" alt="Responsive image">
                    <div class="row">
                        <div class="col-12">
                            <img src="img/moi.png" class="img-fluid">
                        </div>
                    </div>
            </div>
        </div>
    </div>`

Answer 1

如果您使用背景图片作为背景图片会更好，您可以像下面这样缩短您的代码。这是 Codepen 版本:http://codepen.io/johnsackson/pen/GdpNoQ

  <div class="container no-padding">
    <div class="row background-img vmiddle">
      <div class="col-12 text-center">
        <img src="http://www.efusionsoft.com/ready2go/assets/2013/09/500x500-490x490.gif" class="img-fluid">
      </div>
    </div>
  </div>

样式:

.background-img {
  background: url(https://www.ledr.com/colours/red.jpg)
    0 0 no-repeat;
  width: 100%;
  height: 800px;
}

.vmiddle {
  display: flex;
  align-items: center;
}

希望这就是您要找的。