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 browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.

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

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%;
  }

回答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

回答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%);
  }

来源：https://stackoverflow.com/questions/34324360/make-a-scaling-responsive-image-stick-to-bottom-of-div-on-during-resize