如何使用引导程序将图像放置在图像上

Question

知道如何在另一个图像上添加底部中心的图像吗？ 我有以下代码：

http://pastebin.com/LMjQp4Ni

这会产生以下结果 -> http://imgur.com/a/gYmCu那么在这种情况下我如何在图像上做响应式图像呢？ 我想让狗在自然图像的中间底部？

Answer 1

要将图像放在图像上，请在顶部图像上使用绝对定位。

 .container-fluid { padding-top: 70px; padding-bottom: 70px; position: relative; } .bg-1 { background-color: #4CB5F5; color: white; } .img-2 { position: absolute; width: 250px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="container-fluid bg-1 text-center"> <img class="img-responsive" src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature"> <img class="img-responsive img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" > </div>

Answer 2

您可以做的是添加一个边距 (%)，以便根据屏幕大小放置它。 我还取出了您的宽度（250px）并将其设为 %，以便它根据屏幕尺寸增大和减小。

https://jsfiddle.net/4gesrw5r/

.img-2 {
display: inline;
width: 20%;
height: 20%;
margin-top: -25%;
}

Answer 3

您可以使用一张大图像作为 div 的背景图像，然后您可以在该 div 中添加新图像。

Answer 4

绝对定位将帮助您实现这一目标。

   .under
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    .over
    {
    position:absolute;
    left: calc(50% - 125px);
    bottom:0px;
    z-index:-1;
    width: 250px;
    height: auto;
    }

<div class="container-fluid bg-1 text-center">
    <img class="img-responsive under"             src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
    <img class="over img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

演示： https : //jsfiddle.net/g2skfjbL/