Make A Scaling/responsive Image Stick To Bottom Of Div On/during Resize

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. Notice how when you resize the bro

Solution 1:

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

Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).

DEMO

Solution 2:

This will do it for you https://jsfiddle.net/eaxe2sww/4/

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

.imgWrapper {
  width:100%;
  max-width:500px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform:translateX(-50%);
  }