css - 如何将此图像粘贴到 div 的底部

Question

我希望这个图像(较小的 - 灰色的)在调整窗口大小时留在其 div(草 map 像)的底部。我已经尝试在属性上使用自动值，但我猜想它与定位有关，无法弄清楚它到底是什么……有什么想法吗？非常感谢!

代码笔:http://codepen.io/anon/pen/zoEYgP

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 780px;
  /*position: relative;*/

}
.smaller {
  text-align: center;
}
.smaller img {
  position: relative;
  bottom: -280px;
}
@media screen and(max-width: 768px) {
  .images {
    height: auto;
    /*position: relative;*/
  }
  .smaller img {
    width: 80%;
    /*height: auto;*/
    /*margin-bottom: 0px;*/
  }
}

<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

Answer 1

参见 codepen ，我做了 smaller .image position: absolute 并调整了一些 css

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 768px;
  /*height: 100vh;*/
  min-height: 500px;
  max-width: 100%;
  position: relative;
}


.smaller img {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 50%;
    margin: 0 auto;
    right: 0;
}

@media screen and(max-width: 768px) {
  .images {
    height: 100vh;
    //position: relative;
  }
  .smaller img {
    //width: 80%;
    //height: auto;
    //margin-bottom: 0px;
  }
}

<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla laboriosam laborum sapiente sit voluptate voluptatum, velit eius quam minus natus incidunt omnis quidem cupiditate, maxime, ex reprehenderit minima enim!</p>