Javascript 调整大小时，将缩放/响应图像粘贴到div底部

我有一面旗帜。在那个横幅上有一个图像。调整视口/浏览器宽度时，图像将缩放为较小的尺寸以适合窗口

请注意，当您调整浏览器的大小时，随着图像变小，它会从div底部向上移动

我希望图像的底部始终保持在div的底部。不管大小

这是我的

HTML

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

我希望图像的底部始终保持在div的底部。不管大小

将

位置：相对
添加到父元素，并将
位置：绝对
到子元素（以及
底部
和
左侧
值）


我希望图像的底部始终保持在div的底部。不管大小

将
位置：相对
添加到父元素，并将
位置：绝对
到子元素（以及
底部
和
左侧
值）

这将为您解决问题

这会帮你的

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

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