Как разместить изображение над изображением с загрузочной машиной

Question

Любая идея, как я могу добавить изображение, которое находится внизу по другому изображению? У меня есть следующий код:

http://pastebin.com/LMjQp4Ni

Это производит следующий результат -> http://imgur.com/a/gYmCu Так как я могу сделать адаптивное изображение по изображению в этой ситуации? Я хочу, чтобы собака была в средней нижней части образа природы?

Answer 1

Что вы можете сделать, это добавить маржу (%), чтобы она была размещена на основе размера экрана. Я также взял вашу ширину (250 пикселей) и сделал это%, поэтому он растет и уменьшается на основе размера экрана.

https://jsfiddle.net/4gesrw5r/

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

Answer 2

Для того, чтобы поместить изображение на изображение, использовать абсолютное позиционирование на верхнем изображении.

.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"> 
 
\t <img class="img-responsive" \t \t \t src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature"> 
 
\t <img class="img-responsive img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" > 
 
</div>

Answer 3

вы можете использовать один большой файл в качестве фонового изображения 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/