在调整大小时/调整大小时，使缩放/响应图像固定在div的底部

我有条横幅.那个横幅上是一幅图像.调整视口/浏览器宽度的大小时，图像将缩放为较小的尺寸以适合窗口.

I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.

请注意，当您调整浏览器的大小时，随着图像的缩小，它会朝着远离div底部的方向向上移动.

Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.

我希望图像的底部始终固定在div的底部.不论大小.

I want the bottom of the image to stick to the bottom of the div always. Regardless of size.

在这里放置我的 JS FIDDLE

Heres my JS FIDDLE

HTML

<div class="wrapper">
 <center>
 <div class="imgWrapper">
    <img src="http://lorempixel.com/500/300/">
 </div>
 </center>
</div>

CSS

.wrapper {
  background:#777;
  width:100%;
  height:400px;
  display:block;
  }

.imgWrapper {
  width:100%;
  max-width:500px;
  display:inline-block;
  margin-top:100px;
  }

.imgWrapper img {
  width:100%;
  }