Question

我有一面旗帜。在那个横幅是一个图像。调整视口/浏览器宽度的大小时，图像会缩放到较小的大小以适合窗口。

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

我希望图像的底部始终贴在div的底部。无论大小。

继承我的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%;
  }

Answer 1

我希望图像的底部始终贴在div的底部。无论大小。

将position: relative添加到父元素，将position: absolute;添加到子元素（以及bottom和left值）。

<强> DEMO

Answer 2

这将为您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%);
  }

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

2 个答案: