title: Make a scaling/responsive image stick to bottom of div on/during resize
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I want the bottom of the image to stick to the bottom of the div always. Regardless of size.</p>
  
  <p><strong>Heres my <a href="https://jsfiddle.net/eaxe2sww/" rel="nofollow">JS FIDDLE</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
   &lt;center&gt;
   &lt;div class="imgWrapper"&gt;
      &lt;img src="http://lorempixel.com/500/300/"&gt;
   &lt;/div&gt;
   &lt;/center&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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%;
    }
  </code></pre>